keevo-components 1.8.498 → 1.8.500
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.
|
@@ -6080,11 +6080,11 @@ class KvLayoutComponent {
|
|
|
6080
6080
|
return !this.showLicencas() && (this.masterName || this.empresaName);
|
|
6081
6081
|
}
|
|
6082
6082
|
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 }); }
|
|
6083
|
-
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 }, topActions: { classPropertyName: "topActions", publicName: "topActions", isSignal: true, 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: true, 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 }, showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", 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: { menus: "menusChange", 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 full-container\">\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 styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n \r\n <!-- LOGO -->\r\n <div class=\"flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden\">\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-1\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <kv-icon\r\n icon=\"menu-2\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"toggleMenu()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div\r\n class=\"flex flex-column \"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(this.selectedEmpresa.razaosocial){\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 }\r\n @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n \r\n }\r\n <kv-icon\r\n icon=\"transfer\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"changeEmpresa($event)\"\r\n class=\" side-menu-item py-1\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n\r\n <!-- MENUS -->\r\n <div class=\"flex-1 list-none m-0 overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n (click)=\"expandMenu()?'':filho.toggle($event)\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"filho.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #appendMenuDiv class=\"appendMenuDiv\"></div>\r\n \r\n <p-menu #filho [popup]=\"true\" [model]=\"returnMenuChilds()(menu.idmenu)\" [appendTo]=\"appendMenuDiv\">\r\n <ng-template pTemplate=\"submenuheader\" let-item let-i=\"index\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n {{item.label}}\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div \r\n class=\" side-menu-item py-2 pl-3 pr-1 text-sm\"\r\n (click)=\"callRoute(item.url)\"\r\n >\r\n {{item.label}}\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\r\n </div>\r\n }\r\n </li>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n \r\n <!-- APPS E SAIR -->\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n (click)=\"!expandMenu() && menusistemas.toggle($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'apps'\"\r\n />\r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"expandMenu() && menusistemas.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #sistemasmenughost class=\"appendMenuDiv\"></div>\r\n <p-menu #menusistemas [popup]=\"true\" [model]=\"apps\" [appendTo]=\"sistemasmenughost\">\r\n <ng-template pTemplate=\"submenuheader\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n Sistemas\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"callRoute(item.rotapadrao)\"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2 w-2 border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{item.nomeaplicativo}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n </li>\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'red'\"\r\n [style.opacity]=\"0.5\"\r\n (click)=\"logout($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'logout'\"\r\n \r\n />\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\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 <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\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 <!-- TOPO -->\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 @if(showBreadcrumb) {\r\n <div>\r\n <p class=\"text-xl font-semibold system-color 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-1rem bg-transparent\"\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 }\r\n @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n }\r\n } \r\n @if (exibirNomes) { \r\n @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=\"font-semibold system-color\">{{ 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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\r\n </div>\r\n } \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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 } \r\n } \r\n @else { \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=\"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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 }\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=\"system-color font-medium text-lg px-2 py-3 m-0\">\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 @for (action of actions; track $index) {\r\n <ng-container>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <kv-icon\r\n [icon]=\"action.icon\"\r\n />\r\n <span>{{action.label}}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"accessKeePass($event)\"\r\n >\r\n <kv-icon\r\n icon=\"lock\"\r\n />\r\n <span>Acessar KeePass</span>\r\n </div>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-kc-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);margin-left:.5rem;margin-top:.5rem;border-radius:.5rem;height:calc(100vh - 1rem)}.page-content{background:none;margin-left:.5rem;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}::ng-deep .card-container{background:rgb(var(--kv-kc-background-system),1);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border:none;box-shadow:none;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}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background:rgb(var(--kv-color-system),.1);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}::ng-deep .p-menu{background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .p-menu .p-submenu-header{color:rgb(var(--kv-color-system),1);padding:0;margin:0}::ng-deep .p-menu .p-submenu-header label{opacity:.7}::ng-deep .p-menu .p-divider{margin:0;padding:0;margin-top:.2rem}.appendMenuDiv{position:absolute;top:-2.2rem;left:1.6rem}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}\n"], dependencies: [{ 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: "component", type: KvIconComponent, selector: "kv-icon", inputs: ["icon", "numNotifications", "img", "clickable"], outputs: ["onClick"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10$2.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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: 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: TopIconsComponent, selector: "kv-top-icons", inputs: ["topActions"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
6083
|
+
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 }, topActions: { classPropertyName: "topActions", publicName: "topActions", isSignal: true, 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: true, 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 }, showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", 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: { menus: "menusChange", 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 full-container\">\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 styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n \r\n <!-- LOGO -->\r\n <div class=\"flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden\">\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-1\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <kv-icon\r\n icon=\"menu-2\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"toggleMenu()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div\r\n class=\"flex flex-column \"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(this.selectedEmpresa.razaosocial){\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 }\r\n @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n \r\n }\r\n <kv-icon\r\n icon=\"transfer\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"changeEmpresa($event)\"\r\n class=\" side-menu-item py-1\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n\r\n <!-- MENUS -->\r\n <div class=\"flex-1 list-none m-0 overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n (click)=\"expandMenu()?'':filho.toggle($event)\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"filho.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #appendMenuDiv class=\"appendMenuDiv\"></div>\r\n \r\n <p-menu #filho [popup]=\"true\" [model]=\"returnMenuChilds()(menu.idmenu)\" [appendTo]=\"appendMenuDiv\">\r\n <ng-template pTemplate=\"submenuheader\" let-item let-i=\"index\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n {{item.label}}\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div \r\n class=\" side-menu-item py-2 pl-3 pr-1 text-sm\"\r\n (click)=\"callRoute(item.url)\"\r\n >\r\n {{item.label}}\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\r\n </div>\r\n }\r\n </li>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n \r\n <!-- APPS E SAIR -->\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n (click)=\"!expandMenu() && menusistemas.toggle($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'apps'\"\r\n />\r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"expandMenu() && menusistemas.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #sistemasmenughost class=\"appendMenuDiv\"></div>\r\n <p-menu #menusistemas [popup]=\"true\" [model]=\"apps\" [appendTo]=\"sistemasmenughost\">\r\n <ng-template pTemplate=\"submenuheader\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n Sistemas\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"callRoute(item.rotapadrao)\"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2 w-2 border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{item.nomeaplicativo}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n </li>\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'red'\"\r\n [style.opacity]=\"0.5\"\r\n (click)=\"logout($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'logout'\"\r\n \r\n />\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\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 <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\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 <!-- TOPO -->\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 @if(showBreadcrumb) {\r\n <div>\r\n <p class=\"text-xl font-semibold system-color 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-1rem bg-transparent\"\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 }\r\n @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n }\r\n } \r\n @if (exibirNomes) { \r\n @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=\"font-semibold system-color\">{{ 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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\r\n </div>\r\n } \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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 } \r\n } \r\n @else { \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=\"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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 mb-2\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"system-color font-medium text-lg px-2 py-3 m-0\">\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 @for (action of actions; track $index) {\r\n <ng-container>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <kv-icon\r\n [icon]=\"action.icon\"\r\n />\r\n <span>{{action.label}}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"accessKeePass($event)\"\r\n >\r\n <kv-icon\r\n icon=\"lock\"\r\n />\r\n <span>Acessar KeePass</span>\r\n </div>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-kc-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);margin-left:.5rem;margin-top:.5rem;border-radius:.5rem;height:calc(100vh - 1rem)}.page-content{background:none;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}::ng-deep .card-container{background:rgb(var(--kv-kc-background-system),1);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border:none;box-shadow:none;overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:0;margin:0}::ng-deep .card-container .p-card-content{margin:0;padding:0}::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}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background:rgb(var(--kv-color-system),.1);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}::ng-deep .p-menu{background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .p-menu .p-submenu-header{color:rgb(var(--kv-color-system),1);padding:0;margin:0}::ng-deep .p-menu .p-submenu-header label{opacity:.7}::ng-deep .p-menu .p-divider{margin:0;padding:0;margin-top:.2rem}.appendMenuDiv{position:absolute;top:-2.2rem;left:1.6rem}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}\n"], dependencies: [{ 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: "component", type: KvIconComponent, selector: "kv-icon", inputs: ["icon", "numNotifications", "img", "clickable"], outputs: ["onClick"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10$2.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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: 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: TopIconsComponent, selector: "kv-top-icons", inputs: ["topActions"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
6084
6084
|
}
|
|
6085
6085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
|
|
6086
6086
|
type: Component,
|
|
6087
|
-
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row full-container\">\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 styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n \r\n <!-- LOGO -->\r\n <div class=\"flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden\">\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-1\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <kv-icon\r\n icon=\"menu-2\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"toggleMenu()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div\r\n class=\"flex flex-column \"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(this.selectedEmpresa.razaosocial){\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 }\r\n @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n \r\n }\r\n <kv-icon\r\n icon=\"transfer\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"changeEmpresa($event)\"\r\n class=\" side-menu-item py-1\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n\r\n <!-- MENUS -->\r\n <div class=\"flex-1 list-none m-0 overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n (click)=\"expandMenu()?'':filho.toggle($event)\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"filho.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #appendMenuDiv class=\"appendMenuDiv\"></div>\r\n \r\n <p-menu #filho [popup]=\"true\" [model]=\"returnMenuChilds()(menu.idmenu)\" [appendTo]=\"appendMenuDiv\">\r\n <ng-template pTemplate=\"submenuheader\" let-item let-i=\"index\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n {{item.label}}\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div \r\n class=\" side-menu-item py-2 pl-3 pr-1 text-sm\"\r\n (click)=\"callRoute(item.url)\"\r\n >\r\n {{item.label}}\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\r\n </div>\r\n }\r\n </li>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n \r\n <!-- APPS E SAIR -->\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n (click)=\"!expandMenu() && menusistemas.toggle($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'apps'\"\r\n />\r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"expandMenu() && menusistemas.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #sistemasmenughost class=\"appendMenuDiv\"></div>\r\n <p-menu #menusistemas [popup]=\"true\" [model]=\"apps\" [appendTo]=\"sistemasmenughost\">\r\n <ng-template pTemplate=\"submenuheader\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n Sistemas\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"callRoute(item.rotapadrao)\"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2 w-2 border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{item.nomeaplicativo}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n </li>\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'red'\"\r\n [style.opacity]=\"0.5\"\r\n (click)=\"logout($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'logout'\"\r\n \r\n />\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\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 <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\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 <!-- TOPO -->\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 @if(showBreadcrumb) {\r\n <div>\r\n <p class=\"text-xl font-semibold system-color 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-1rem bg-transparent\"\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 }\r\n @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n }\r\n } \r\n @if (exibirNomes) { \r\n @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=\"font-semibold system-color\">{{ 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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\r\n </div>\r\n } \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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 } \r\n } \r\n @else { \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=\"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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 }\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=\"system-color font-medium text-lg px-2 py-3 m-0\">\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 @for (action of actions; track $index) {\r\n <ng-container>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <kv-icon\r\n [icon]=\"action.icon\"\r\n />\r\n <span>{{action.label}}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"accessKeePass($event)\"\r\n >\r\n <kv-icon\r\n icon=\"lock\"\r\n />\r\n <span>Acessar KeePass</span>\r\n </div>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-kc-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);margin-left:.5rem;margin-top:.5rem;border-radius:.5rem;height:calc(100vh - 1rem)}.page-content{background:none;margin-left:.5rem;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}::ng-deep .card-container{background:rgb(var(--kv-kc-background-system),1);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border:none;box-shadow:none;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}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background:rgb(var(--kv-color-system),.1);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}::ng-deep .p-menu{background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .p-menu .p-submenu-header{color:rgb(var(--kv-color-system),1);padding:0;margin:0}::ng-deep .p-menu .p-submenu-header label{opacity:.7}::ng-deep .p-menu .p-divider{margin:0;padding:0;margin-top:.2rem}.appendMenuDiv{position:absolute;top:-2.2rem;left:1.6rem}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}\n"] }]
|
|
6087
|
+
args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row full-container\">\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 styleClass=\"transition-all\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n \r\n <!-- LOGO -->\r\n <div class=\"flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden\">\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-1\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.8rem'\"\r\n width=\"auto\"\r\n class=\"\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <kv-icon\r\n icon=\"menu-2\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"toggleMenu()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}\"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div\r\n class=\"flex flex-column \"\r\n (click)=\"changeEmpresa($event)\"\r\n >\r\n @if(this.selectedEmpresa.razaosocial){\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 }\r\n @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-sm mt-1\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n \r\n }\r\n <kv-icon\r\n icon=\"transfer\"\r\n [clickable]=\"true\"\r\n [pTooltip]=\"'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (onClick)=\"changeEmpresa($event)\"\r\n class=\" side-menu-item py-1\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n\r\n <!-- MENUS -->\r\n <div class=\"flex-1 list-none m-0 overflow-y-auto max-h-full\">\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n >\r\n <kv-icon\r\n [icon]=\"menu.icone|| 'circle-dotted'\"\r\n (click)=\"expandMenu()?'':filho.toggle($event)\"\r\n />\r\n @if(expandMenu()){\r\n <label>{{menu.descricaomenu}}</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"filho.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #appendMenuDiv class=\"appendMenuDiv\"></div>\r\n \r\n <p-menu #filho [popup]=\"true\" [model]=\"returnMenuChilds()(menu.idmenu)\" [appendTo]=\"appendMenuDiv\">\r\n <ng-template pTemplate=\"submenuheader\" let-item let-i=\"index\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n {{item.label}}\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div \r\n class=\" side-menu-item py-2 pl-3 pr-1 text-sm\"\r\n (click)=\"callRoute(item.url)\"\r\n >\r\n {{item.label}}\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\r\n </div>\r\n }\r\n </li>\r\n }\r\n </div>\r\n\r\n <p-divider type=\"solid\"></p-divider>\r\n \r\n <!-- APPS E SAIR -->\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n (click)=\"!expandMenu() && menusistemas.toggle($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'apps'\"\r\n />\r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <kv-icon\r\n #chevronIcon\r\n icon=\"chevron-right\"\r\n (click)=\"expandMenu() && menusistemas.toggle($event)\"\r\n [clickable]=\"true\"\r\n />\r\n }\r\n </div>\r\n <div #sistemasmenughost class=\"appendMenuDiv\"></div>\r\n <p-menu #menusistemas [popup]=\"true\" [model]=\"apps\" [appendTo]=\"sistemasmenughost\">\r\n <ng-template pTemplate=\"submenuheader\">\r\n <label class=\"font-medium pl-3 text-xs\">\r\n Sistemas\r\n </label>\r\n <div [style.height.rem]=\"0.5\"></div>\r\n </ng-template>\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"callRoute(item.rotapadrao)\"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2 w-2 border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{item.nomeaplicativo}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n </li>\r\n <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'red'\"\r\n [style.opacity]=\"0.5\"\r\n (click)=\"logout($event)\"\r\n >\r\n <kv-icon\r\n [icon]=\"'logout'\"\r\n \r\n />\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\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 <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\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 <!-- TOPO -->\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 @if(showBreadcrumb) {\r\n <div>\r\n <p class=\"text-xl font-semibold system-color 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-1rem bg-transparent\"\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 }\r\n @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n }\r\n } \r\n @if (exibirNomes) { \r\n @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=\"font-semibold system-color\">{{ 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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\r\n </div>\r\n } \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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 } \r\n } \r\n @else { \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=\"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 <kv-top-icons\r\n [topActions]=\"topActions()\"\r\n />\r\n\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 }\r\n </div>\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 mb-2\">\r\n <p-card\r\n styleClass=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\"\r\n >\r\n <ng-content></ng-content>\r\n </p-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel de aplicativos -->\r\n <p-overlayPanel\r\n #sistemasPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n <div\r\n class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n style=\"width: 270px; height: 100%\"\r\n >\r\n @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n <div\r\n class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n >\r\n {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n </div>\r\n } @else {\r\n <img\r\n [src]=\"aplicativo.urlicone\"\r\n class=\"btn-sistema flex align-items-center justify-content-center\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n />\r\n } }\r\n\r\n <!-- <button\r\n *ngFor=\"let aplicativo of apps\"\r\n pButton\r\n pRipple\r\n class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n [tooltipPosition]=\"'left'\"\r\n (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n >\r\n {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n </button> -->\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <p class=\"system-color font-medium text-lg px-2 py-3 m-0\">\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 @for (action of actions; track $index) {\r\n <ng-container>\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <kv-icon\r\n [icon]=\"action.icon\"\r\n />\r\n <span>{{action.label}}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n <div class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 px-2\"\r\n (click)=\"accessKeePass($event)\"\r\n >\r\n <kv-icon\r\n icon=\"lock\"\r\n />\r\n <span>Acessar KeePass</span>\r\n </div>\r\n \r\n </div>\r\n </ng-template>\r\n \r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-kc-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);margin-left:.5rem;margin-top:.5rem;border-radius:.5rem;height:calc(100vh - 1rem)}.page-content{background:none;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}::ng-deep .card-container{background:rgb(var(--kv-kc-background-system),1);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border:none;box-shadow:none;overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:0;margin:0}::ng-deep .card-container .p-card-content{margin:0;padding:0}::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}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background:rgb(var(--kv-color-system),.1);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}::ng-deep .p-menu{background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .p-menu .p-submenu-header{color:rgb(var(--kv-color-system),1);padding:0;margin:0}::ng-deep .p-menu .p-submenu-header label{opacity:.7}::ng-deep .p-menu .p-divider{margin:0;padding:0;margin-top:.2rem}.appendMenuDiv{position:absolute;top:-2.2rem;left:1.6rem}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}\n"] }]
|
|
6088
6088
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.FormBuilder }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { apps: [{
|
|
6089
6089
|
type: Input
|
|
6090
6090
|
}], actions: [{
|