aril 0.0.45 → 0.0.46

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

@@ -1,170 +1,170 @@
-import { NgClass } from '@angular/common';
-import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router, 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 { Subscription, filter } from 'rxjs';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
-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,
-	selector: 'app-layout',
-	imports: [
-		NgClass,
-		RouterOutlet,
-		ConfirmDialogModule,
-		ConfirmPopupModule,
-		DialogModule,
-		MessagesModule,
-		ToastModule,
-		AppSidebarComponent,
-		AppTopbarComponent,
-		AppBreadcrumbComponent,
-		AppProfileSidebarComponent,
-		AppConfigComponent
-	],
-	templateUrl: './app.layout.component.html'
-})
-export class AppLayoutComponent implements OnDestroy {
-	overlayMenuOpenSubscription: Subscription;
-
-	menuOutsideClickListener: any;
-
-	menuScrollListener: any;
-
-	@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
-
-	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
-
-	constructor(
-		private menuService: AppMenuService,
-		public layoutService: LayoutService,
-		public renderer: Renderer2,
-		public router: Router
-	) {
-		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
-			if (!this.menuOutsideClickListener) {
-				this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
-					const isOutsideClicked = !(
-						this.appSidebar.el.nativeElement.isSameNode(event.target) ||
-						this.appSidebar.el.nativeElement.contains(event.target) ||
-						this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
-						this.appTopbar.menuButton.nativeElement.contains(event.target)
-					);
-					if (isOutsideClicked) {
-						this.hideMenu();
-					}
-				});
-			}
-
-			if (
-				(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus()) &&
-				!this.menuScrollListener
-			) {
-				this.menuScrollListener = this.renderer.listen(
-					this.appSidebar.menuContainer.nativeElement,
-					'scroll',
-					(event) => {
-						if (this.layoutService.isDesktop()) {
-							this.hideMenu();
-						}
-					}
-				);
-			}
-
-			if (this.layoutService.state.staticMenuMobileActive) {
-				this.blockBodyScroll();
-			}
-		});
-
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-			this.hideMenu();
-		});
-	}
-
-	blockBodyScroll(): void {
-		if (document.body.classList) {
-			document.body.classList.add('blocked-scroll');
-		} else {
-			document.body.className += ' blocked-scroll';
-		}
-	}
-
-	unblockBodyScroll(): void {
-		if (document.body.classList) {
-			document.body.classList.remove('blocked-scroll');
-		} else {
-			document.body.className = document.body.className.replace(
-				new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
-				' '
-			);
-		}
-	}
-
-	hideMenu() {
-		this.layoutService.state.overlayMenuActive = false;
-		this.layoutService.state.staticMenuMobileActive = false;
-		this.layoutService.state.menuHoverActive = false;
-		this.menuService.reset();
-
-		if (this.menuOutsideClickListener) {
-			this.menuOutsideClickListener();
-			this.menuOutsideClickListener = null;
-		}
-
-		if (this.menuScrollListener) {
-			this.menuScrollListener();
-			this.menuScrollListener = null;
-		}
-
-		this.unblockBodyScroll();
-	}
-
-	get containerClass() {
-		return {
-			'layout-light': this.layoutService.config().colorScheme === 'light',
-			'layout-dim': this.layoutService.config().colorScheme === 'dim',
-			'layout-dark': this.layoutService.config().colorScheme === 'dark',
-			'layout-colorscheme-menu': this.layoutService.config().menuTheme === 'colorScheme',
-			'layout-primarycolor-menu': this.layoutService.config().menuTheme === 'primaryColor',
-			'layout-transparent-menu': this.layoutService.config().menuTheme === 'transparent',
-			'layout-overlay': this.layoutService.config().menuMode === 'overlay',
-			'layout-static': this.layoutService.config().menuMode === 'static',
-			'layout-slim': this.layoutService.config().menuMode === 'slim',
-			'layout-slim-plus': this.layoutService.config().menuMode === 'slim-plus',
-			'layout-horizontal': this.layoutService.config().menuMode === 'horizontal',
-			'layout-reveal': this.layoutService.config().menuMode === 'reveal',
-			'layout-drawer': this.layoutService.config().menuMode === 'drawer',
-			'layout-static-inactive':
-				this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
-			'layout-overlay-active': this.layoutService.state.overlayMenuActive,
-			'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
-			'p-input-filled': this.layoutService.config().inputStyle === 'filled',
-			'p-ripple-disabled': !this.layoutService.config().ripple,
-			'layout-sidebar-active': this.layoutService.state.sidebarActive,
-			'layout-sidebar-anchored': this.layoutService.state.anchored
-		};
-	}
-
-	ngOnDestroy() {
-		if (this.overlayMenuOpenSubscription) {
-			this.overlayMenuOpenSubscription.unsubscribe();
-		}
-
-		if (this.menuOutsideClickListener) {
-			this.menuOutsideClickListener();
-		}
-	}
-}
+import { NgClass } from '@angular/common';
+import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import { NavigationEnd, Router, 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 { Subscription, filter } from 'rxjs';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+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,
+	selector: 'app-layout',
+	imports: [
+		NgClass,
+		RouterOutlet,
+		ConfirmDialogModule,
+		ConfirmPopupModule,
+		DialogModule,
+		MessagesModule,
+		ToastModule,
+		AppSidebarComponent,
+		AppTopbarComponent,
+		AppBreadcrumbComponent,
+		AppProfileSidebarComponent,
+		AppConfigComponent
+	],
+	templateUrl: './app.layout.component.html'
+})
+export class AppLayoutComponent implements OnDestroy {
+	overlayMenuOpenSubscription: Subscription;
+
+	menuOutsideClickListener: any;
+
+	menuScrollListener: any;
+
+	@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+
+	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
+
+	constructor(
+		private menuService: AppMenuService,
+		public layoutService: LayoutService,
+		public renderer: Renderer2,
+		public router: Router
+	) {
+		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+			if (!this.menuOutsideClickListener) {
+				this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
+					const isOutsideClicked = !(
+						this.appSidebar.el.nativeElement.isSameNode(event.target) ||
+						this.appSidebar.el.nativeElement.contains(event.target) ||
+						this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
+						this.appTopbar.menuButton.nativeElement.contains(event.target)
+					);
+					if (isOutsideClicked) {
+						this.hideMenu();
+					}
+				});
+			}
+
+			if (
+				(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus()) &&
+				!this.menuScrollListener
+			) {
+				this.menuScrollListener = this.renderer.listen(
+					this.appSidebar.menuContainer.nativeElement,
+					'scroll',
+					(event) => {
+						if (this.layoutService.isDesktop()) {
+							this.hideMenu();
+						}
+					}
+				);
+			}
+
+			if (this.layoutService.state.staticMenuMobileActive) {
+				this.blockBodyScroll();
+			}
+		});
+
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+			this.hideMenu();
+		});
+	}
+
+	blockBodyScroll(): void {
+		if (document.body.classList) {
+			document.body.classList.add('blocked-scroll');
+		} else {
+			document.body.className += ' blocked-scroll';
+		}
+	}
+
+	unblockBodyScroll(): void {
+		if (document.body.classList) {
+			document.body.classList.remove('blocked-scroll');
+		} else {
+			document.body.className = document.body.className.replace(
+				new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
+				' '
+			);
+		}
+	}
+
+	hideMenu() {
+		this.layoutService.state.overlayMenuActive = false;
+		this.layoutService.state.staticMenuMobileActive = false;
+		this.layoutService.state.menuHoverActive = false;
+		this.menuService.reset();
+
+		if (this.menuOutsideClickListener) {
+			this.menuOutsideClickListener();
+			this.menuOutsideClickListener = null;
+		}
+
+		if (this.menuScrollListener) {
+			this.menuScrollListener();
+			this.menuScrollListener = null;
+		}
+
+		this.unblockBodyScroll();
+	}
+
+	get containerClass() {
+		return {
+			'layout-light': this.layoutService.config().colorScheme === 'light',
+			'layout-dim': this.layoutService.config().colorScheme === 'dim',
+			'layout-dark': this.layoutService.config().colorScheme === 'dark',
+			'layout-colorscheme-menu': this.layoutService.config().menuTheme === 'colorScheme',
+			'layout-primarycolor-menu': this.layoutService.config().menuTheme === 'primaryColor',
+			'layout-transparent-menu': this.layoutService.config().menuTheme === 'transparent',
+			'layout-overlay': this.layoutService.config().menuMode === 'overlay',
+			'layout-static': this.layoutService.config().menuMode === 'static',
+			'layout-slim': this.layoutService.config().menuMode === 'slim',
+			'layout-slim-plus': this.layoutService.config().menuMode === 'slim-plus',
+			'layout-horizontal': this.layoutService.config().menuMode === 'horizontal',
+			'layout-reveal': this.layoutService.config().menuMode === 'reveal',
+			'layout-drawer': this.layoutService.config().menuMode === 'drawer',
+			'layout-static-inactive':
+				this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
+			'layout-overlay-active': this.layoutService.state.overlayMenuActive,
+			'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+			'p-input-filled': this.layoutService.config().inputStyle === 'filled',
+			'p-ripple-disabled': !this.layoutService.config().ripple,
+			'layout-sidebar-active': this.layoutService.state.sidebarActive,
+			'layout-sidebar-anchored': this.layoutService.state.anchored
+		};
+	}
+
+	ngOnDestroy() {
+		if (this.overlayMenuOpenSubscription) {
+			this.overlayMenuOpenSubscription.unsubscribe();
+		}
+
+		if (this.menuOutsideClickListener) {
+			this.menuOutsideClickListener();
+		}
+	}
+}

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.html

@@ -1,9 +1,9 @@
-<ul class="layout-menu flex-wrap">
-	@for (item of menuService.menuItems(); track $index) {
-		@if (item.separator) {
-			<li class="menu-separator"></li>
-		} @else {
-			<li app-menuitem [item]="item" [index]="$index" [root]="true"></li>
-		}
-	}
-</ul>
+<ul class="layout-menu flex-wrap">
+	@for (item of menuService.menuItems(); track $index) {
+		@if (item.separator) {
+			<li class="menu-separator"></li>
+		} @else {
+			<li app-menuitem [item]="item" [index]="$index" [root]="true"></li>
+		}
+	}
+</ul>