@stiunb/unb-lib-components 21.0.0 → 21.0.1
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.
|
@@ -210,8 +210,9 @@ class UnbAuthService {
|
|
|
210
210
|
this.usuario$ = this.usuarioSubject.asObservable();
|
|
211
211
|
this.usuarioModel = new UnbUsuarioModel();
|
|
212
212
|
}
|
|
213
|
-
initiate(oidcSecurityService) {
|
|
213
|
+
initiate(oidcSecurityService, clientId) {
|
|
214
214
|
this.oidcSecurityService = oidcSecurityService;
|
|
215
|
+
this.clientId = clientId;
|
|
215
216
|
this.logAuthenticatedState();
|
|
216
217
|
}
|
|
217
218
|
logAuthenticatedState() {
|
|
@@ -233,8 +234,24 @@ class UnbAuthService {
|
|
|
233
234
|
? `${nomes[0]} ${nomes[nomes.length - 1]}`
|
|
234
235
|
: nomes[0];
|
|
235
236
|
this.oidcSecurityService.getPayloadFromAccessToken().subscribe((authResult) => {
|
|
236
|
-
|
|
237
|
-
|
|
237
|
+
// 1. Pega as roles globais (Realm)
|
|
238
|
+
const realmRoles = authResult.realm_access?.roles || [];
|
|
239
|
+
let clientRoles = [];
|
|
240
|
+
// 2. Busca no resource_access
|
|
241
|
+
if (this.clientId && authResult.resource_access?.[this.clientId]) {
|
|
242
|
+
clientRoles = authResult.resource_access[this.clientId].roles || [];
|
|
243
|
+
}
|
|
244
|
+
// 3. Junta tudo sem duplicar
|
|
245
|
+
const todasAsRoles = Array.from(new Set([...realmRoles, ...clientRoles]));
|
|
246
|
+
// 4. NOVA ETAPA: Filtra as roles técnicas do Keycloak
|
|
247
|
+
const rolesLimpas = todasAsRoles.filter(role => {
|
|
248
|
+
const isRoleTecnica = role === 'offline_access' ||
|
|
249
|
+
role === 'uma_authorization' ||
|
|
250
|
+
role.startsWith('default-roles-'); // Limpa tanto a de homologa quanto a de prod
|
|
251
|
+
// Só mantém o perfil se ele NÃO for uma role técnica
|
|
252
|
+
return !isRoleTecnica;
|
|
253
|
+
});
|
|
254
|
+
this.usuarioModel.perfis = rolesLimpas;
|
|
238
255
|
this.usuarioSubject.next(this.usuarioModel);
|
|
239
256
|
});
|
|
240
257
|
}
|
|
@@ -263,7 +280,7 @@ class UnbUsuarioComponent {
|
|
|
263
280
|
}
|
|
264
281
|
ngOnInit() {
|
|
265
282
|
if (this.oidcSecurityService) {
|
|
266
|
-
this.authService.initiate(this.oidcSecurityService);
|
|
283
|
+
this.authService.initiate(this.oidcSecurityService, this.clientId);
|
|
267
284
|
this.usuario$ = this.authService.usuario$;
|
|
268
285
|
}
|
|
269
286
|
}
|
|
@@ -274,13 +291,15 @@ class UnbUsuarioComponent {
|
|
|
274
291
|
this.authService.logout();
|
|
275
292
|
}
|
|
276
293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UnbUsuarioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UnbUsuarioComponent, isStandalone: false, selector: "unb-usuario", inputs: { oidcSecurityService: "oidcSecurityService" }, ngImport: i0, template: "<ng-container *ngIf=\"{ user: usuario$ | async } as state\">\r\n\r\n <div class=\"usuario-container\">\r\n\r\n <ng-container *ngIf=\"state.user?.autenticado; else guestOrLoading\">\r\n \r\n <button mat-icon-button [matMenuTriggerFor]=\"userMenu\" class=\"avatar-button\" aria-label=\"Menu do usu\u00E1rio\">\r\n <mat-icon class=\"avatar-icon\">account_circle</mat-icon>\r\n </button>\r\n\r\n <mat-menu #userMenu=\"matMenu\" xPosition=\"before\" class=\"custom-user-menu\">\r\n <div class=\"menu-header\">\r\n <div class=\"user-avatar-placeholder\">\r\n <mat-icon>person</mat-icon>\r\n </div>\r\n <div class=\"user-details\">\r\n <span class=\"user-name\">{{ state.user?.usuarioNome }}</span>\r\n <span class=\"user-profiles\" *ngIf=\"state.user?.perfis?.length\">\r\n {{ state.user?.perfis?.join(', ') }}\r\n </span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <button mat-menu-item (click)=\"logout()\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Sair</span>\r\n </button>\r\n </mat-menu>\r\n\r\n </ng-container>\r\n\r\n <ng-template #guestOrLoading>\r\n <button mat-stroked-button class=\"btn-login\" (click)=\"login()\">\r\n <mat-icon>login</mat-icon>\r\n <span>Entrar</span>\r\n </button>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n</ng-container>", styles: [":host{display:flex;align-items:center;height:100%}.usuario-container{display:flex;align-items:center;height:100%}.btn-login{border-radius:20px;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important;background-color:transparent!important;line-height:36px;padding:0 16px;white-space:nowrap}.btn-login mat-icon{margin-right:8px;color:#fff!important}.btn-login:hover{background-color:#ffffff1a!important}.avatar-button{display:flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;padding:0!important;background:transparent}.avatar-icon{font-size:32px!important;width:32px!important;height:32px!important;color:#fff!important;line-height:1!important;display:flex;align-items:center;justify-content:center}.menu-header{padding:16px;display:flex;align-items:center;gap:12px;min-width:200px;outline:none}.user-avatar-placeholder{width:40px;height:40px;background-color:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#757575}.user-details{display:flex;flex-direction:column}.user-name{font-weight:600;font-size:.95rem;color:#333}.user-profiles{font-size:.75rem;color:#666;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UnbUsuarioComponent, isStandalone: false, selector: "unb-usuario", inputs: { oidcSecurityService: "oidcSecurityService", clientId: "clientId" }, ngImport: i0, template: "<ng-container *ngIf=\"{ user: usuario$ | async } as state\">\r\n\r\n <div class=\"usuario-container\">\r\n\r\n <ng-container *ngIf=\"state.user?.autenticado; else guestOrLoading\">\r\n \r\n <button mat-icon-button [matMenuTriggerFor]=\"userMenu\" class=\"avatar-button\" aria-label=\"Menu do usu\u00E1rio\">\r\n <mat-icon class=\"avatar-icon\">account_circle</mat-icon>\r\n </button>\r\n\r\n <mat-menu #userMenu=\"matMenu\" xPosition=\"before\" class=\"custom-user-menu\">\r\n <div class=\"menu-header\">\r\n <div class=\"user-avatar-placeholder\">\r\n <mat-icon>person</mat-icon>\r\n </div>\r\n <div class=\"user-details\">\r\n <span class=\"user-name\">{{ state.user?.usuarioNome }}</span>\r\n <span class=\"user-profiles\" *ngIf=\"state.user?.perfis?.length\">\r\n {{ state.user?.perfis?.join(', ') }}\r\n </span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <button mat-menu-item (click)=\"logout()\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Sair</span>\r\n </button>\r\n </mat-menu>\r\n\r\n </ng-container>\r\n\r\n <ng-template #guestOrLoading>\r\n <button mat-stroked-button class=\"btn-login\" (click)=\"login()\">\r\n <mat-icon>login</mat-icon>\r\n <span>Entrar</span>\r\n </button>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n</ng-container>", styles: [":host{display:flex;align-items:center;height:100%}.usuario-container{display:flex;align-items:center;height:100%}.btn-login{border-radius:20px;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important;background-color:transparent!important;line-height:36px;padding:0 16px;white-space:nowrap}.btn-login mat-icon{margin-right:8px;color:#fff!important}.btn-login:hover{background-color:#ffffff1a!important}.avatar-button{display:flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;padding:0!important;background:transparent}.avatar-icon{font-size:32px!important;width:32px!important;height:32px!important;color:#fff!important;line-height:1!important;display:flex;align-items:center;justify-content:center}.menu-header{padding:16px;display:flex;align-items:center;gap:12px;min-width:200px;outline:none}.user-avatar-placeholder{width:40px;height:40px;background-color:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#757575}.user-details{display:flex;flex-direction:column}.user-name{font-weight:600;font-size:.95rem;color:#333}.user-profiles{font-size:.75rem;color:#666;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
278
295
|
}
|
|
279
296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UnbUsuarioComponent, decorators: [{
|
|
280
297
|
type: Component,
|
|
281
298
|
args: [{ selector: 'unb-usuario', standalone: false, template: "<ng-container *ngIf=\"{ user: usuario$ | async } as state\">\r\n\r\n <div class=\"usuario-container\">\r\n\r\n <ng-container *ngIf=\"state.user?.autenticado; else guestOrLoading\">\r\n \r\n <button mat-icon-button [matMenuTriggerFor]=\"userMenu\" class=\"avatar-button\" aria-label=\"Menu do usu\u00E1rio\">\r\n <mat-icon class=\"avatar-icon\">account_circle</mat-icon>\r\n </button>\r\n\r\n <mat-menu #userMenu=\"matMenu\" xPosition=\"before\" class=\"custom-user-menu\">\r\n <div class=\"menu-header\">\r\n <div class=\"user-avatar-placeholder\">\r\n <mat-icon>person</mat-icon>\r\n </div>\r\n <div class=\"user-details\">\r\n <span class=\"user-name\">{{ state.user?.usuarioNome }}</span>\r\n <span class=\"user-profiles\" *ngIf=\"state.user?.perfis?.length\">\r\n {{ state.user?.perfis?.join(', ') }}\r\n </span>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <button mat-menu-item (click)=\"logout()\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Sair</span>\r\n </button>\r\n </mat-menu>\r\n\r\n </ng-container>\r\n\r\n <ng-template #guestOrLoading>\r\n <button mat-stroked-button class=\"btn-login\" (click)=\"login()\">\r\n <mat-icon>login</mat-icon>\r\n <span>Entrar</span>\r\n </button>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n</ng-container>", styles: [":host{display:flex;align-items:center;height:100%}.usuario-container{display:flex;align-items:center;height:100%}.btn-login{border-radius:20px;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important;background-color:transparent!important;line-height:36px;padding:0 16px;white-space:nowrap}.btn-login mat-icon{margin-right:8px;color:#fff!important}.btn-login:hover{background-color:#ffffff1a!important}.avatar-button{display:flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;padding:0!important;background:transparent}.avatar-icon{font-size:32px!important;width:32px!important;height:32px!important;color:#fff!important;line-height:1!important;display:flex;align-items:center;justify-content:center}.menu-header{padding:16px;display:flex;align-items:center;gap:12px;min-width:200px;outline:none}.user-avatar-placeholder{width:40px;height:40px;background-color:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#757575}.user-details{display:flex;flex-direction:column}.user-name{font-weight:600;font-size:.95rem;color:#333}.user-profiles{font-size:.75rem;color:#666;margin-top:2px}\n"] }]
|
|
282
299
|
}], propDecorators: { oidcSecurityService: [{
|
|
283
300
|
type: Input
|
|
301
|
+
}], clientId: [{
|
|
302
|
+
type: Input
|
|
284
303
|
}] } });
|
|
285
304
|
|
|
286
305
|
class UnbNavBarComponent {
|
|
@@ -309,7 +328,7 @@ class UnbNavBarComponent {
|
|
|
309
328
|
}
|
|
310
329
|
}
|
|
311
330
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UnbNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UnbNavBarComponent, isStandalone: false, selector: "unb-nav-bar", inputs: { nomeSistema: "nomeSistema", nomeSistemaMobile: "nomeSistemaMobile", menuSize: "menuSize", widthToHideMenu: "widthToHideMenu", contentBackgroundColor: "contentBackgroundColor", containerPadding: "containerPadding", oidcSecurityService: "oidcSecurityService" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"app-container\">\r\n\r\n <mat-toolbar class=\"app-toolbar\">\r\n\r\n <button mat-icon-button class=\"menu-button\" color=\"accent\" (click)=\"sidenav.toggle()\" aria-label=\"Toggle sidenav\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n\r\n <div class=\"branding\">\r\n <img src=\"assets/img/unb_icon_branco.svg\" alt=\"Logo UnB\" class=\"logo\">\r\n\r\n <span class=\"app-title\" *ngIf=\"{ isMobile: isMobile$ | async } as state\">\r\n {{ state.isMobile ? nomeSistemaMobile : nomeSistema }}\r\n </span>\r\n </div>\r\n\r\n <span class=\"spacer\"></span>\r\n\r\n <div class=\"actions-container\">\r\n <unb-usuario [oidcSecurityService]=\"oidcSecurityService\"></unb-usuario>\r\n </div>\r\n\r\n </mat-toolbar>\r\n\r\n <mat-sidenav-container class=\"sidenav-container\" [ngStyle]=\"{'background-color': contentBackgroundColor}\">\r\n\r\n <mat-sidenav #sidenav [mode]=\"(isMobile$ | async) ? 'over' : 'side'\" [opened]=\"!(isMobile$ | async)\"\r\n [style.width.px]=\"menuSize\" class=\"app-sidenav\">\r\n\r\n <div class=\"menu-wrapper\" (click)=\"handleMenuClick()\"> \r\n <ng-content select=\"[menu]\"></ng-content>\r\n </div>\r\n </mat-sidenav>\r\n\r\n <mat-sidenav-content [ngStyle]=\"{'padding.px': containerPadding}\">\r\n <ng-content select=\"[body]\"></ng-content>\r\n </mat-sidenav-content>\r\n\r\n </mat-sidenav-container>\r\n</div>", styles: [":host{--toolbar-height: 64px;--primary-color: #003366;--text-color: #ffffff}.app-container{display:flex;flex-direction:column;position:absolute;inset:0}.app-toolbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;height:var(--toolbar-height);padding:0 16px;box-shadow:0 2px 5px #0003;color:var(--text-color);background-color:var(--primary-color)}.branding{display:flex;align-items:center;gap:12px;overflow:hidden}.logo{height:32px;width:auto;flex-shrink:0}.app-title{font-weight:500;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px}.spacer{flex:1 1 auto}.actions-container{display:flex;align-items:center;justify-content:center;margin-left:16px;padding-left:16px;height:100%;position:relative}.actions-container:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background-color:#ffffff4d}.sidenav-container{flex:1}@media(max-width:600px){:host{--toolbar-height: 56px}.app-toolbar{padding:0 8px}.app-title{font-size:1rem}.actions-container{padding-left:8px;margin-left:8px;border:none}}.menu-wrapper{height:100%;overflow-y:auto}.menu-button{margin-right:8px;color:#fff!important}.menu-button mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UnbUsuarioComponent, selector: "unb-usuario", inputs: ["oidcSecurityService"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UnbNavBarComponent, isStandalone: false, selector: "unb-nav-bar", inputs: { nomeSistema: "nomeSistema", nomeSistemaMobile: "nomeSistemaMobile", menuSize: "menuSize", widthToHideMenu: "widthToHideMenu", contentBackgroundColor: "contentBackgroundColor", containerPadding: "containerPadding", oidcSecurityService: "oidcSecurityService", clientId: "clientId" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"app-container\">\r\n\r\n <mat-toolbar class=\"app-toolbar\">\r\n\r\n <button mat-icon-button class=\"menu-button\" color=\"accent\" (click)=\"sidenav.toggle()\" aria-label=\"Toggle sidenav\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n\r\n <div class=\"branding\">\r\n <img src=\"assets/img/unb_icon_branco.svg\" alt=\"Logo UnB\" class=\"logo\">\r\n\r\n <span class=\"app-title\" *ngIf=\"{ isMobile: isMobile$ | async } as state\">\r\n {{ state.isMobile ? nomeSistemaMobile : nomeSistema }}\r\n </span>\r\n </div>\r\n\r\n <span class=\"spacer\"></span>\r\n\r\n <div class=\"actions-container\">\r\n <unb-usuario [oidcSecurityService]=\"oidcSecurityService\"></unb-usuario>\r\n </div>\r\n\r\n </mat-toolbar>\r\n\r\n <mat-sidenav-container class=\"sidenav-container\" [ngStyle]=\"{'background-color': contentBackgroundColor}\">\r\n\r\n <mat-sidenav #sidenav [mode]=\"(isMobile$ | async) ? 'over' : 'side'\" [opened]=\"!(isMobile$ | async)\"\r\n [style.width.px]=\"menuSize\" class=\"app-sidenav\">\r\n\r\n <div class=\"menu-wrapper\" (click)=\"handleMenuClick()\"> \r\n <ng-content select=\"[menu]\"></ng-content>\r\n </div>\r\n </mat-sidenav>\r\n\r\n <mat-sidenav-content [ngStyle]=\"{'padding.px': containerPadding}\">\r\n <ng-content select=\"[body]\"></ng-content>\r\n </mat-sidenav-content>\r\n\r\n </mat-sidenav-container>\r\n</div>", styles: [":host{--toolbar-height: 64px;--primary-color: #003366;--text-color: #ffffff}.app-container{display:flex;flex-direction:column;position:absolute;inset:0}.app-toolbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;height:var(--toolbar-height);padding:0 16px;box-shadow:0 2px 5px #0003;color:var(--text-color);background-color:var(--primary-color)}.branding{display:flex;align-items:center;gap:12px;overflow:hidden}.logo{height:32px;width:auto;flex-shrink:0}.app-title{font-weight:500;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px}.spacer{flex:1 1 auto}.actions-container{display:flex;align-items:center;justify-content:center;margin-left:16px;padding-left:16px;height:100%;position:relative}.actions-container:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background-color:#ffffff4d}.sidenav-container{flex:1}@media(max-width:600px){:host{--toolbar-height: 56px}.app-toolbar{padding:0 8px}.app-title{font-size:1rem}.actions-container{padding-left:8px;margin-left:8px;border:none}}.menu-wrapper{height:100%;overflow-y:auto}.menu-button{margin-right:8px;color:#fff!important}.menu-button mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UnbUsuarioComponent, selector: "unb-usuario", inputs: ["oidcSecurityService", "clientId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
313
332
|
}
|
|
314
333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UnbNavBarComponent, decorators: [{
|
|
315
334
|
type: Component,
|
|
@@ -328,6 +347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
328
347
|
type: Input
|
|
329
348
|
}], oidcSecurityService: [{
|
|
330
349
|
type: Input
|
|
350
|
+
}], clientId: [{
|
|
351
|
+
type: Input
|
|
331
352
|
}], sidenav: [{
|
|
332
353
|
type: ViewChild,
|
|
333
354
|
args: ['sidenav']
|