keevo-components 1.8.406 → 1.8.408
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2604,7 +2604,7 @@ class KvDropdownComponent extends BaseComponentDropDown {
|
|
|
2604
2604
|
this.filterPlaceholder = '';
|
|
2605
2605
|
this.placeholder = ' ';
|
|
2606
2606
|
this.virtualScroll = false;
|
|
2607
|
-
this.appendTo = input('');
|
|
2607
|
+
this.appendTo = input('body');
|
|
2608
2608
|
this.changes = signal(0);
|
|
2609
2609
|
this.onLazyLoad = new EventEmitter();
|
|
2610
2610
|
this.pDropDown = viewChild(Dropdown);
|
|
@@ -6042,7 +6042,7 @@ class KvLayoutComponent {
|
|
|
6042
6042
|
if (menu.link) {
|
|
6043
6043
|
return {
|
|
6044
6044
|
...menu,
|
|
6045
|
-
bgColor: paths.includes(menu.link) ? 'rgb(
|
|
6045
|
+
bgColor: paths.includes(menu.link) ? 'rgb(0, 37, 66)' : '',
|
|
6046
6046
|
textColor: paths.includes(menu.link) ? 'text-white' : '',
|
|
6047
6047
|
};
|
|
6048
6048
|
}
|
|
@@ -6078,11 +6078,11 @@ class KvLayoutComponent {
|
|
|
6078
6078
|
return !this.showLicencas() && (this.masterName || this.empresaName);
|
|
6079
6079
|
}
|
|
6080
6080
|
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 }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6081
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: false, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\"\r\n\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 md:m-3\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n @if(widthPage() < 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"w-full\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n } }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-2 md:p-3\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">\r\n Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n </p>\r\n <div class=\"mt-5 mb-3\"></div>\r\n\r\n <p-button\r\n icon=\"pi pi-lock\"\r\n label=\"Acessar Keepass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-sign-out\"\r\n label=\"Sair\"\r\n (onClick)=\"logout($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#29b92d}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$9.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: 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" }] }); }
|
|
6081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: false, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"isSelectedMenuPai(menu) ? 'rgb(0, 37, 66)' : 'white'\"\r\n\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 md:m-3\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n @if(widthPage() < 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"w-full\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n } }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-2 md:p-3\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">\r\n Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n </p>\r\n <div class=\"mt-5 mb-3\"></div>\r\n\r\n <p-button\r\n icon=\"pi pi-lock\"\r\n label=\"Acessar Keepass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-sign-out\"\r\n label=\"Sair\"\r\n (onClick)=\"logout($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#002542!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$9.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: 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" }] }); }
|
|
6082
6082
|
}
|
|
6083
6083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
|
|
6084
6084
|
type: Component,
|
|
6085
|
-
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\"\r\n\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 md:m-3\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n @if(widthPage() < 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"w-full\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n } }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-2 md:p-3\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">\r\n Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n </p>\r\n <div class=\"mt-5 mb-3\"></div>\r\n\r\n <p-button\r\n icon=\"pi pi-lock\"\r\n label=\"Acessar Keepass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-sign-out\"\r\n label=\"Sair\"\r\n (onClick)=\"logout($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#29b92d}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
|
|
6085
|
+
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"isSelectedMenuPai(menu) ? 'rgb(0, 37, 66)' : 'white'\"\r\n\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 md:m-3\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\r\n <span\r\n *ngIf=\"showButtonApps\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Sistemas'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"sistemasPanel.toggle($event)\"\r\n >\r\n apps\r\n </span>\r\n\r\n <span\r\n *ngIf=\"showButtonUser\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"meusDadosPanel.toggle($event)\"\r\n >\r\n person\r\n </span>\r\n </div>\r\n\r\n @if(widthPage() < 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"w-full\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n } }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-2 md:p-3\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">\r\n Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n </p>\r\n <div class=\"mt-5 mb-3\"></div>\r\n\r\n <p-button\r\n icon=\"pi pi-lock\"\r\n label=\"Acessar Keepass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-sign-out\"\r\n label=\"Sair\"\r\n (onClick)=\"logout($event)\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n >\r\n </p-button>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#002542!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
|
|
6086
6086
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.FormBuilder }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { apps: [{
|
|
6087
6087
|
type: Input
|
|
6088
6088
|
}], breadCrumbItems: [{
|