aril 0.0.24 → 0.0.26

package/theme/layout/app/config/app.config.component.ts

@@ -1,14 +1,14 @@
-import { Component, Input, OnInit } from '@angular/core';
 import { NgClass, NgStyle } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { SidebarModule } from 'primeng/sidebar';
-import { RadioButtonModule } from 'primeng/radiobutton';
 import { ButtonModule } from 'primeng/button';
 import { InputSwitchModule } from 'primeng/inputswitch';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { SidebarModule } from 'primeng/sidebar';
 
-import { AppMenuService } from '../../service/app.menu.service';
 import { ColorScheme, LayoutService, MenuColorScheme, MenuMode } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
 
 @Component({
 	standalone: true,

package/theme/layout/app/layout/app.layout.component.d.ts

@@ -1,10 +1,10 @@
 import { OnDestroy, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { LayoutService } from '../../service/app.layout.service';
 import { AppMenuService } from '../../service/app.menu.service';
 import { AppSidebarComponent } from '../sidebar/app.sidebar.component';
 import { AppTopbarComponent } from '../topbar/app.topbar.component';
-import { LayoutService } from '../../service/app.layout.service';
 import * as i0 from "@angular/core";
 export declare class AppLayoutComponent implements OnDestroy {
     private menuService;

package/theme/layout/app/layout/app.layout.component.ts

@@ -2,21 +2,21 @@ import { NgClass } from '@angular/common';
 import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
-import { filter, Subscription } from 'rxjs';
-
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { DialogModule } from 'primeng/dialog';
 import { MessagesModule } from 'primeng/messages';
 import { ToastModule } from 'primeng/toast';
 
+import { Subscription, filter } from 'rxjs';
+
+import { LayoutService } from '../../service/app.layout.service';
 import { AppMenuService } from '../../service/app.menu.service';
-import { AppSidebarComponent } from '../sidebar/app.sidebar.component';
-import { AppTopbarComponent } from '../topbar/app.topbar.component';
 import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
-import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
-import { LayoutService } from '../../service/app.layout.service';
 import { AppConfigComponent } from '../config/app.config.component';
+import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
+import { AppSidebarComponent } from '../sidebar/app.sidebar.component';
+import { AppTopbarComponent } from '../topbar/app.topbar.component';
 
 @Component({
 	standalone: true,

package/theme/layout/app/layout/mfe.layout.component.ts

@@ -1,49 +1,49 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { ConfirmPopupModule } from 'primeng/confirmpopup';
-import { DialogModule } from 'primeng/dialog';
-import { MessagesModule } from 'primeng/messages';
-import { ToastModule } from 'primeng/toast';
-
-import { AppSubMenuComponent } from '../menu/app.menu.component';
-
-@Component({
-	standalone: true,
-	selector: 'mfe-layout',
-	template: `
-		<app-sub-menu hidden></app-sub-menu>
-
-		<router-outlet />
-
-		<p-toast key="toast-root"></p-toast>
-		<p-dialog key="dialog-root"></p-dialog>
-		<p-messages key="messages-root"></p-messages>
-		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
-		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
-	`,
-	imports: [
-		RouterOutlet,
-		ConfirmDialogModule,
-		ConfirmPopupModule,
-		DialogModule,
-		MessagesModule,
-		ToastModule,
-		AppSubMenuComponent
-	]
-})
-export class MFELayoutComponent implements AfterViewInit, OnDestroy {
-	ngAfterViewInit(): void {
-		setTimeout(() => {
-			const appSidebar = document.getElementsByTagName('app-sidebar')[0];
-			const subMenu = document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF) as HTMLElement;
-			subMenu.removeAttribute('hidden');
-			appSidebar.append(subMenu);
-		}, 10);
-	}
-
-	ngOnDestroy(): void {
-		document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF)?.remove();
-	}
-}
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { DialogModule } from 'primeng/dialog';
+import { MessagesModule } from 'primeng/messages';
+import { ToastModule } from 'primeng/toast';
+
+import { AppSubMenuComponent } from '../menu/app.menu.component';
+
+@Component({
+	standalone: true,
+	selector: 'mfe-layout',
+	template: `
+		<app-sub-menu hidden></app-sub-menu>
+
+		<router-outlet />
+
+		<p-toast key="toast-root"></p-toast>
+		<p-dialog key="dialog-root"></p-dialog>
+		<p-messages key="messages-root"></p-messages>
+		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
+		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
+	`,
+	imports: [
+		RouterOutlet,
+		ConfirmDialogModule,
+		ConfirmPopupModule,
+		DialogModule,
+		MessagesModule,
+		ToastModule,
+		AppSubMenuComponent
+	]
+})
+export class MFELayoutComponent implements AfterViewInit, OnDestroy {
+	ngAfterViewInit(): void {
+		setTimeout(() => {
+			const appSidebar = document.getElementsByTagName('app-sidebar')[0];
+			const subMenu = document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF) as HTMLElement;
+			subMenu.removeAttribute('hidden');
+			appSidebar.append(subMenu);
+		}, 10);
+	}
+
+	ngOnDestroy(): void {
+		document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF)?.remove();
+	}
+}

package/theme/layout/app/menu/app.menu.component.d.ts

@@ -1,10 +1,10 @@
+import { AnimationEvent } from '@angular/animations';
 import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { AnimationEvent } from '@angular/animations';
 import { MenuItem } from 'primeng/api';
 import { Subscription } from 'rxjs';
-import { AppMenuService } from '../../service/app.menu.service';
 import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
 import * as i0 from "@angular/core";
 export declare class AppMenuItemComponent implements OnInit, OnDestroy {
     layoutService: LayoutService;

package/theme/layout/app/menu/app.menu.component.ts

@@ -1,3 +1,4 @@
+import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations';
 import { NgClass } from '@angular/common';
 import {
 	ChangeDetectorRef,
@@ -11,7 +12,6 @@ import {
 	inject
 } from '@angular/core';
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
-import { animate, state, style, transition, trigger, AnimationEvent } from '@angular/animations';
 
 import { MenuItem } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -21,8 +21,8 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
-import { AppMenuService } from '../../service/app.menu.service';
 import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
 
 @Component({
 	standalone: true,

package/theme/layout/app/menu/app.sub.menu.component.html

@@ -1,13 +1,13 @@
-<div class="layout-sidebar">
-	<div #subMenuContainer class="layout-menu-container">
-		<ul class="layout-menu flex-wrap">
-			@for (subItem of menuService.subMenuItems(); track $index) {
-				@if (subItem.separator) {
-					<li class="menu-separator"></li>
-				} @else {
-					<li app-menuitem [item]="subItem" [index]="$index" [root]="true"></li>
-				}
-			}
-		</ul>
-	</div>
-</div>
+<div class="layout-sidebar">
+	<div #subMenuContainer class="layout-menu-container">
+		<ul class="layout-menu flex-wrap">
+			@for (subItem of menuService.subMenuItems(); track $index) {
+				@if (subItem.separator) {
+					<li class="menu-separator"></li>
+				} @else {
+					<li app-menuitem [item]="subItem" [index]="$index" [root]="true"></li>
+				}
+			}
+		</ul>
+	</div>
+</div>

package/theme/layout/app/profileSidebar/app.profilesidebar.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
-import { TagModule } from 'primeng/tag';
 import { SidebarModule } from 'primeng/sidebar';
+import { TagModule } from 'primeng/tag';
 
 import { LayoutService } from '../../service/app.layout.service';
 

package/theme/layout/app/sidebar/app.sidebar.component.ts

@@ -1,5 +1,5 @@
-import { RouterLink } from '@angular/router';
 import { Component, ElementRef, ViewChild } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 import { LayoutService } from '../../service/app.layout.service';
 import { AppMenuComponent } from '../menu/app.menu.component';

package/theme/layout/app/topbar/app.topbar.component.d.ts

@@ -1,10 +1,11 @@
 import { ElementRef } from '@angular/core';
+import { KeycloakManager } from 'aril/keycloak';
 import { LayoutService } from '../../service/app.layout.service';
 import * as i0 from "@angular/core";
 export declare class AppTopbarComponent {
-    layoutService: LayoutService;
     menuButton: ElementRef;
-    constructor(layoutService: LayoutService);
+    layoutService: LayoutService;
+    keyCloakManager: KeycloakManager;
     onMenuButtonClick(): void;
     onProfileButtonClick(): void;
     onConfigButtonClick(): void;

package/theme/layout/app/topbar/app.topbar.component.html

@@ -1,37 +1,45 @@
-<div class="layout-topbar">
-	<div class="topbar-start">
-		<button #menubutton type="button" class="topbar-menubutton p-link p-trigger" (click)="onMenuButtonClick()">
-			<i class="pi pi-bars"></i>
-		</button>
-
-		<!-- <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb> -->
-	</div>
-
-	<div class="topbar-end">
-		<ul class="topbar-menu">
-			<li class="topbar-search">
-				<span class="p-input-icon-left">
-					<i class="pi pi-search"></i>
-					<input
-						type="text"
-						pInputText
-						placeholder="Search"
-						class="p-inputtext p-component p-element w-12rem sm:w-full" />
-				</span>
-			</li>
-			<!-- <li class="ml-3">
-				<button
-					pButton
-					type="button"
-					icon="pi pi-cog"
-					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
-					(click)="onConfigButtonClick()"></button>
-			</li> -->
-			<li class="topbar-profile">
-				<button type="button" class="p-link" (click)="onProfileButtonClick()">
-					<img src="assets/images/avatar.png" alt="Profile" />
-				</button>
-			</li>
-		</ul>
-	</div>
-</div>
+<div class="layout-topbar">
+	<div class="topbar-start">
+		<button #menubutton type="button" class="topbar-menubutton p-link p-trigger" (click)="onMenuButtonClick()">
+			<i class="pi pi-bars"></i>
+		</button>
+
+		<!-- <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb> -->
+	</div>
+
+	<div class="topbar-end">
+		<ul class="topbar-menu">
+			<li class="topbar-search">
+				<span class="p-input-icon-left">
+					<i class="pi pi-search"></i>
+					<input
+						type="text"
+						pInputText
+						placeholder="Search"
+						class="p-inputtext p-component p-element w-12rem sm:w-full" />
+				</span>
+			</li>
+			<!-- <li class="ml-3">
+				<button
+					pButton
+					type="button"
+					icon="pi pi-cog"
+					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
+					(click)="onConfigButtonClick()"></button>
+			</li> -->
+			<li class="ml-3">
+				<button
+					pButton
+					type="button"
+					icon="pi pi-power-off"
+					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
+					(click)="keyCloakManager.logout()"></button>
+			</li>
+			<li class="topbar-profile">
+				<button type="button" class="p-link" (click)="onProfileButtonClick()">
+					<img src="assets/images/avatar.png" alt="Profile" />
+				</button>
+			</li>
+		</ul>
+	</div>
+</div>

package/theme/layout/app/topbar/app.topbar.component.ts

@@ -1,28 +1,32 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
-
-@Component({
-	standalone: true,
-	selector: 'app-topbar',
-	imports: [ButtonModule, AppBreadcrumbComponent],
-	templateUrl: './app.topbar.component.html'
-})
-export class AppTopbarComponent {
-	@ViewChild('menubutton') menuButton!: ElementRef;
-
-	constructor(public layoutService: LayoutService) {}
-
-	onMenuButtonClick() {
-		this.layoutService.onMenuToggle();
-	}
-
-	onProfileButtonClick() {
-		this.layoutService.showProfileSidebar();
-	}
-	onConfigButtonClick() {
-		this.layoutService.showConfigSidebar();
-	}
-}
+import { Component, ElementRef, ViewChild, inject } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+
+import { KeycloakManager } from 'aril/keycloak';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-topbar',
+	imports: [ButtonModule, AppBreadcrumbComponent],
+	templateUrl: './app.topbar.component.html'
+})
+export class AppTopbarComponent {
+	@ViewChild('menubutton') menuButton!: ElementRef;
+
+	layoutService = inject(LayoutService);
+	keyCloakManager = inject(KeycloakManager);
+
+	onMenuButtonClick() {
+		this.layoutService.onMenuToggle();
+	}
+
+	onProfileButtonClick() {
+		this.layoutService.showProfileSidebar();
+	}
+	onConfigButtonClick() {
+		this.layoutService.showConfigSidebar();
+	}
+}