keevo-components 1.8.471 → 1.8.473
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kv-layout/layout/kv-layout.component.mjs +2 -2
- package/esm2022/lib/components/kv-tree-table/kv-tree-table.component.mjs +89 -82
- package/fesm2022/keevo-components.mjs +89 -82
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-tree-table/kv-tree-table.component.d.ts +10 -8
- package/package.json +1 -1
|
@@ -212,11 +212,11 @@ export class KvLayoutComponent {
|
|
|
212
212
|
return !this.showLicencas() && (this.masterName || this.empresaName);
|
|
213
213
|
}
|
|
214
214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormBuilder }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: false, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"\r\n isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n \"\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\"\r\n >Organiza\u00E7\u00E3o: {{ empresaName }}</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\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 style=\"min-width: 20rem;\"\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 py-2 px-2 lg:px-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 <!-- Cont\u00EAiner com dire\u00E7\u00E3o em coluna para empilhar os bot\u00F5es -->\r\n <div class=\"flex flex-column\">\r\n <!-- Bot\u00F5es adicionais din\u00E2micos -->\r\n <ng-container *ngFor=\"let action of actions\">\r\n <p-button\r\n [icon]=\"action.icon\"\r\n [label]=\"action.label\"\r\n (onClick)=\"action.action()\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n ></p-button>\r\n </ng-container>\r\n \r\n <!-- Bot\u00F5es padr\u00E3o -->\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 ></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 ></p-button>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.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: i9.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i11.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.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i14.DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: i15.CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: false, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"\r\n isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n \"\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\"\r\n >Organiza\u00E7\u00E3o: {{ empresaName }}</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\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 style=\"min-width: 20rem;\"\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 py-2 px-2 lg:px-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 <!-- Cont\u00EAiner com dire\u00E7\u00E3o em coluna para empilhar os bot\u00F5es -->\r\n <div class=\"flex flex-column\">\r\n <!-- Bot\u00F5es adicionais din\u00E2micos -->\r\n <ng-container *ngFor=\"let action of actions\">\r\n <p-button\r\n [icon]=\"action.icon\"\r\n [label]=\"action.label\"\r\n (onClick)=\"action.action()\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n ></p-button>\r\n </ng-container>\r\n \r\n <!-- Bot\u00F5es padr\u00E3o -->\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 ></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 ></p-button>\r\n \r\n </div>\r\n </ng-template>\r\n \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-content{padding:0rem!important;height:100%}::ng-deep .p-card .p-card-body{padding:0rem!important;height:100%}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.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: i9.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i11.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.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i14.DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: i15.CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
216
216
|
}
|
|
217
217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
|
|
218
218
|
type: Component,
|
|
219
|
-
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"\r\n isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n \"\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\"\r\n >Organiza\u00E7\u00E3o: {{ empresaName }}</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\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 style=\"min-width: 20rem;\"\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 py-2 px-2 lg:px-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 <!-- Cont\u00EAiner com dire\u00E7\u00E3o em coluna para empilhar os bot\u00F5es -->\r\n <div class=\"flex flex-column\">\r\n <!-- Bot\u00F5es adicionais din\u00E2micos -->\r\n <ng-container *ngFor=\"let action of actions\">\r\n <p-button\r\n [icon]=\"action.icon\"\r\n [label]=\"action.label\"\r\n (onClick)=\"action.action()\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n ></p-button>\r\n </ng-container>\r\n \r\n <!-- Bot\u00F5es padr\u00E3o -->\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 ></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 ></p-button>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
|
|
219
|
+
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n <div\r\n [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n ></div>\r\n @if (showMenu) {\r\n <div\r\n [style]=\"{\r\n minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n }\"\r\n ></div>\r\n } @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n class=\"sidebar-animation\"\r\n styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-column overflow-hidden\">\r\n <div\r\n class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n >\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} py-3\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n <img\r\n *ngIf=\"expandMenu() && logoMenuExpand\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Logo para o menu minimizado-->\r\n <img\r\n *ngIf=\"!expandMenu() && logoMenuHide\"\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'3rem'\"\r\n width=\"auto\"\r\n class=\"mb-2 p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n\r\n <!-- Toggle menu -->\r\n <span\r\n *ngIf=\"showExpandMenu\"\r\n class=\"material-symbols-outlined top-layout-icons p-1\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n menu\r\n </span>\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }}\"\r\n >\r\n <div\r\n class=\"flex flex-column cursor-pointer\"\r\n *ngIf=\"expandMenu() && selectedEmpresa\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n <span\r\n class=\"text-sm font-semibold mr-2\"\r\n [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n </div>\r\n\r\n <button\r\n pButton\r\n class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n (click)=\"changeEmpresa($event)\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n >\r\n <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n </button>\r\n </div>\r\n <p-divider type=\"solid\"></p-divider>\r\n }\r\n </div>\r\n\r\n <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n <li\r\n *ngFor=\"let menu of menus; let i = index\"\r\n [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n >\r\n <!-- menu que n\u00E3o tem filho -->\r\n <a\r\n (click)=\"callRoute(menu.link)\"\r\n *ngIf=\"\r\n !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n \"\r\n pRipple\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n [tooltipPosition]=\"'right'\"\r\n class=\"menu-option\"\r\n [style.background-color]=\"menu.bgColor\"\r\n [class.justify-content-center]=\"!expandMenu()\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color {{ menu.textColor }}\"\r\n *ngIf=\"menu.icone\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n menu.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </a>\r\n <!-- menu com filho -->\r\n <div *ngIf=\"menu.indmenupai\">\r\n <a\r\n pRipple\r\n pStyleClass=\"@next\"\r\n enterClass=\"hidden\"\r\n enterActiveClass=\"slidedown\"\r\n leaveToClass=\"hidden\"\r\n leaveActiveClass=\"slideup\"\r\n [style.background-color]=\"\r\n isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n \"\r\n class=\"menu-option {{\r\n !expandMenu()\r\n ? 'justify-content-center'\r\n : 'justify-content-between'\r\n }} \"\r\n [tooltipPosition]=\"'right'\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"\r\n expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n \"\r\n >\r\n <div class=\"flex flex-row align-items-center\">\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"menu.icone\"\r\n [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n >\r\n {{ menu.icone }}\r\n </i>\r\n <span\r\n class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ menu.descricaomenu }}</span\r\n >\r\n </div>\r\n <span\r\n class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n *ngIf=\"expandMenu()\"\r\n ></span>\r\n </a>\r\n\r\n <!-- filhos -->\r\n <div\r\n class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n !(\r\n menuSelecionado()?.idmenupai == menu.idmenu &&\r\n this.expandMenu()\r\n ) && 'hidden'\r\n }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n >\r\n <li\r\n *ngFor=\"\r\n let filho of returnMenuChild(menu.idmenu);\r\n let iFilho = index\r\n \"\r\n >\r\n <a\r\n *ngIf=\"expandMenu()\"\r\n (click)=\"callRoute(filho.link)\"\r\n pRipple\r\n class=\"menu-option\"\r\n [style.background-color]=\"filho.bgColor\"\r\n >\r\n <i\r\n class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n expandMenu() ? 'ml-1 mr-2' : ''\r\n }} icon-hover-color\"\r\n *ngIf=\"filho.icone\"\r\n >\r\n {{ filho.icone }}\r\n </i>\r\n <span\r\n class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n filho.textColor\r\n }}\"\r\n *ngIf=\"expandMenu()\"\r\n >{{ filho.descricaomenu }}</span\r\n >\r\n </a>\r\n </li>\r\n </div>\r\n </div>\r\n </li>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- Topbar -->\r\n <div\r\n class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n <div>\r\n <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n {{\r\n breadCrumbItems[breadCrumbItems.length - 1] &&\r\n breadCrumbItems[breadCrumbItems.length - 1].label\r\n ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n : \"\"\r\n }}\r\n </p>\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n [model]=\"breadCrumbItems\"\r\n [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n ></p-breadcrumb>\r\n </div>\r\n } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\"\r\n >Organiza\u00E7\u00E3o: {{ empresaName }}</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n }\r\n\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 style=\"min-width: 20rem;\"\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 py-2 px-2 lg:px-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 <!-- Cont\u00EAiner com dire\u00E7\u00E3o em coluna para empilhar os bot\u00F5es -->\r\n <div class=\"flex flex-column\">\r\n <!-- Bot\u00F5es adicionais din\u00E2micos -->\r\n <ng-container *ngFor=\"let action of actions\">\r\n <p-button\r\n [icon]=\"action.icon\"\r\n [label]=\"action.label\"\r\n (onClick)=\"action.action()\"\r\n styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n [text]=\"true\"\r\n ></p-button>\r\n </ng-container>\r\n \r\n <!-- Bot\u00F5es padr\u00E3o -->\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 ></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 ></p-button>\r\n \r\n </div>\r\n </ng-template>\r\n \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-content{padding:0rem!important;height:100%}::ng-deep .p-card .p-card-body{padding:0rem!important;height:100%}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
|
|
220
220
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.FormBuilder }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { apps: [{
|
|
221
221
|
type: Input
|
|
222
222
|
}], actions: [{
|