aril 1.1.63 → 1.1.65

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

@@ -1,350 +1,350 @@
-import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations';
-import { NgClass } from '@angular/common';
-import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
-
-import { MenuItem } from 'primeng/api';
-import { DomHandler } from 'primeng/dom';
-import { RippleModule } from 'primeng/ripple';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { TranslocoService } from '@ngneat/transloco';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-import { PluginMenuItem } from 'aril/boot/config/apps';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
-
-@Component({
-	standalone: true,
-	selector: '[app-menuitem]',
-	template: `
-		<ng-container>
-			@if (root) {
-				<div class="layout-menuitem-root-text">
-					{{ item.label[activeLang()!] }}
-				</div>
-			}
-			@if (item.items?.length) {
-				<a
-					[ngClass]="{ 'active-root-menu-item': root && key == menuService.activeRootMenuItemKey() }"
-					(click)="itemClick($event)"
-					(mouseenter)="onMouseEnter()"
-					tabindex="0"
-					pRipple
-					[pTooltip]="item.label[activeLang()!]"
-					[tooltipDisabled]="!(isSlim && root && !active)">
-					<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
-					<span class="layout-menuitem-text">{{ item.label[activeLang()!] }}</span>
-					@if (item.items) {
-						<i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-					}
-				</a>
-			} @else {
-				<a
-					[ngClass]="{ 'active-root-menu-item': root && key == menuService.activeRootMenuItemKey() }"
-					(click)="itemClick($event)"
-					(mouseenter)="onMouseEnter()"
-					[routerLink]="item.routerLink"
-					routerLinkActive="active-route"
-					[routerLinkActiveOptions]="{
-						paths: 'exact',
-						queryParams: 'ignored',
-						matrixParams: 'ignored',
-						fragment: 'ignored'
-					}"
-					tabindex="0"
-					pRipple
-					[pTooltip]="item.label[activeLang()!]"
-					[tooltipDisabled]="!(isSlim && root)">
-					<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
-
-					@if (item.label && item.label[activeLang()!]) {
-						<span class="layout-menuitem-text">{{ item.label[activeLang()!] }}</span>
-					}
-					@if (item.items) {
-						<i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-					}
-				</a>
-			}
-
-			@if (item.items) {
-				<ul #submenu [@children]="submenuAnimation" (@children.done)="onSubmenuAnimated($event)">
-					@for (child of item.items; track child; let i = $index) {
-						<li app-menuitem [item]="child" [index]="i" [parentKey]="key"></li>
-					}
-				</ul>
-			}
-		</ng-container>
-	`,
-	imports: [NgClass, RouterLink, RouterLinkActive, TooltipModule, RippleModule],
-	animations: [
-		trigger('children', [
-			state(
-				'collapsed',
-				style({
-					height: '0'
-				})
-			),
-			state(
-				'expanded',
-				style({
-					height: '*'
-				})
-			),
-			state(
-				'hidden',
-				style({
-					display: 'none'
-				})
-			),
-			state(
-				'visible',
-				style({
-					display: 'block'
-				})
-			),
-			transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
-		])
-	],
-	styles: [
-		'.active-root-menu-item { background-color: var(--primary-color); & > i,span { color: var(--primary-foreground) !important; } & > span { font-weight: 700; } }'
-	]
-})
-export class AppMenuItemComponent implements OnInit, OnDestroy {
-	@Input() item!: PluginMenuItem;
-
-	@Input() index!: number;
-
-	@Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
-
-	@Input() parentKey!: string;
-
-	@ViewChild('submenu') submenu!: ElementRef;
-
-	active = false;
-
-	menuSourceSubscription: Subscription;
-
-	menuResetSubscription: Subscription;
-
-	key: string = '';
-
-	activeLang = toSignal(this.translocoService.langChanges$);
-
-	constructor(
-		public layoutService: LayoutService,
-		public router: Router,
-		public menuService: AppMenuService,
-		private readonly translocoService: TranslocoService
-	) {
-		this.menuSourceSubscription = this.menuService.menuSource$.subscribe((value) => {
-			Promise.resolve(null).then(() => {
-				if (value.routeEvent) {
-					this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
-				} else {
-					if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
-						this.active = false;
-					}
-				}
-			});
-		});
-
-		this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
-			this.active = false;
-		});
-
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params: any) => {
-			if (this.isSlimPlus || this.isSlim || this.isHorizontal) {
-				if (!this.layoutService.mfeAppItemClicked()) this.active = false;
-			} else {
-				if (this.item.routerLink) {
-					this.updateActiveStateFromRoute();
-				}
-			}
-
-			if (
-				this.item.routerLink === params.url ||
-				this.item.routerLink === params.urlAfterRedirects ||
-				(this.item.routerLink &&
-					this.router.isActive(this.item.routerLink, {
-						matrixParams: 'ignored',
-						queryParams: 'ignored',
-						fragment: 'ignored',
-						paths: 'subset'
-					}))
-			) {
-				this.menuService.activeRootMenuItemKey.set(this.key.charAt(0));
-			}
-		});
-	}
-
-	ngOnInit() {
-		this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
-		if (!(this.isSlimPlus || this.isSlim || this.isHorizontal) && this.item.routerLink) {
-			this.updateActiveStateFromRoute();
-		}
-	}
-
-	ngAfterViewChecked() {
-		if (
-			this.root &&
-			this.active &&
-			this.layoutService.isDesktop() &&
-			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
-		) {
-			this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
-		}
-	}
-
-	updateActiveStateFromRoute() {
-		let activeRoute = this.router.isActive(this.item.routerLink![0], {
-			paths: 'exact',
-			queryParams: 'ignored',
-			matrixParams: 'ignored',
-			fragment: 'ignored'
-		});
-
-		if (activeRoute) {
-			this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
-		}
-	}
-
-	onSubmenuAnimated(event: AnimationEvent) {
-		if (
-			event.toState === 'visible' &&
-			this.layoutService.isDesktop() &&
-			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
-		) {
-			const el = <HTMLUListElement>event.element;
-			const elParent = <HTMLUListElement>el.parentElement;
-			this.calculatePosition(el, elParent);
-		}
-	}
-
-	calculatePosition(overlay: HTMLElement, target: HTMLElement) {
-		if (overlay) {
-			const { left, top } = target.getBoundingClientRect();
-			const [vWidth, vHeight] = [window.innerWidth, window.innerHeight];
-			const [oWidth, oHeight] = [overlay.offsetWidth, overlay.offsetHeight];
-			const scrollbarWidth = DomHandler.calculateScrollbarWidth();
-			// reset
-			overlay.style.top = '';
-			overlay.style.left = '';
-
-			if (this.layoutService.isHorizontal()) {
-				const width = left + oWidth + scrollbarWidth;
-				overlay.style.left = vWidth < width ? `${left - (width - vWidth)}px` : `${left}px`;
-			} else if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
-				const height = top + oHeight;
-				overlay.style.top = vHeight < height ? `${top - (height - vHeight)}px` : `${top}px`;
-			}
-		}
-	}
-
-	itemClick(event: Event) {
-		// avoid processing disabled items
-		if (this.item.disabled) {
-			event.preventDefault();
-			return;
-		}
-
-		// navigate with hover
-		if ((this.root && this.isSlim) || this.isHorizontal || this.isSlimPlus) {
-			this.layoutService.state.menuHoverActive = !this.layoutService.state.menuHoverActive;
-		}
-
-		// execute command
-		if (this.item.command) {
-			this.item.command({ originalEvent: event, item: this.item as unknown as MenuItem });
-		}
-
-		// toggle active state
-		if (this.item.items) {
-			this.active = !this.active;
-
-			if (this.root && this.active && (this.isSlim || this.isHorizontal || this.isSlimPlus)) {
-				this.layoutService.onOverlaySubmenuOpen();
-			}
-		} else {
-			if (this.layoutService.isMobile()) {
-				this.layoutService.state.staticMenuMobileActive = false;
-			}
-
-			if (this.isSlim || this.isHorizontal || this.isSlimPlus) {
-				this.menuService.reset();
-				this.layoutService.state.menuHoverActive = false;
-			}
-		}
-
-		this.menuService.onMenuStateChange({ key: this.key });
-	}
-
-	onMouseEnter() {
-		// activate item on hover
-		if ((<any>globalThis).isHostMode && !this.item.items?.length) return;
-
-		if (this.root && (this.isSlim || this.isHorizontal || this.isSlimPlus) && this.layoutService.isDesktop()) {
-			if (this.layoutService.state.menuHoverActive) {
-				this.active = true;
-				this.menuService.onMenuStateChange({ key: this.key });
-			}
-		}
-	}
-
-	get submenuAnimation() {
-		if (
-			this.layoutService.isDesktop() &&
-			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
-		) {
-			return this.active ? 'visible' : 'hidden';
-		} else
-			return (
-				this.root ? 'expanded'
-				: this.active ? 'expanded'
-				: 'collapsed'
-			);
-	}
-
-	get isHorizontal() {
-		return this.layoutService.isHorizontal();
-	}
-
-	get isSlim() {
-		return this.layoutService.isSlim();
-	}
-
-	get isSlimPlus() {
-		return this.layoutService.isSlimPlus();
-	}
-
-	@HostBinding('class.active-menuitem')
-	get activeClass() {
-		return this.active && !this.root;
-	}
-
-	ngOnDestroy() {
-		if (this.menuSourceSubscription) {
-			this.menuSourceSubscription.unsubscribe();
-		}
-
-		if (this.menuResetSubscription) {
-			this.menuResetSubscription.unsubscribe();
-		}
-	}
-}
-
-@Component({
-	standalone: true,
-	selector: 'app-menu',
-	imports: [AppMenuItemComponent],
-	templateUrl: './app.menu.component.html'
-})
-export class AppMenuComponent {
-	menuService = inject(AppMenuService);
-	isHostMode = (<any>globalThis).isHostMode;
-	hostMenuItems = (<any>globalThis).hostMenuItems;
-}
+import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations';
+import { NgClass } from '@angular/common';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
+
+import { MenuItem } from 'primeng/api';
+import { DomHandler } from 'primeng/dom';
+import { RippleModule } from 'primeng/ripple';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+import { PluginMenuItem } from 'aril/boot/config/apps';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
+
+@Component({
+	standalone: true,
+	selector: '[app-menuitem]',
+	template: `
+		<ng-container>
+			@if (root) {
+				<div class="layout-menuitem-root-text">
+					{{ item.label[activeLang()!] }}
+				</div>
+			}
+			@if (item.items?.length) {
+				<a
+					[ngClass]="{ 'active-root-menu-item': root && key == menuService.activeRootMenuItemKey() }"
+					(click)="itemClick($event)"
+					(mouseenter)="onMouseEnter()"
+					tabindex="0"
+					pRipple
+					[pTooltip]="item.label[activeLang()!]"
+					[tooltipDisabled]="!(isSlim && root && !active)">
+					<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+					<span class="layout-menuitem-text">{{ item.label[activeLang()!] }}</span>
+					@if (item.items) {
+						<i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+					}
+				</a>
+			} @else {
+				<a
+					[ngClass]="{ 'active-root-menu-item': root && key == menuService.activeRootMenuItemKey() }"
+					(click)="itemClick($event)"
+					(mouseenter)="onMouseEnter()"
+					[routerLink]="item.routerLink"
+					routerLinkActive="active-route"
+					[routerLinkActiveOptions]="{
+						paths: 'exact',
+						queryParams: 'ignored',
+						matrixParams: 'ignored',
+						fragment: 'ignored'
+					}"
+					tabindex="0"
+					pRipple
+					[pTooltip]="item.label[activeLang()!]"
+					[tooltipDisabled]="!(isSlim && root)">
+					<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+
+					@if (item.label && item.label[activeLang()!]) {
+						<span class="layout-menuitem-text">{{ item.label[activeLang()!] }}</span>
+					}
+					@if (item.items) {
+						<i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+					}
+				</a>
+			}
+
+			@if (item.items) {
+				<ul #submenu [@children]="submenuAnimation" (@children.done)="onSubmenuAnimated($event)">
+					@for (child of item.items; track child; let i = $index) {
+						<li app-menuitem [item]="child" [index]="i" [parentKey]="key"></li>
+					}
+				</ul>
+			}
+		</ng-container>
+	`,
+	imports: [NgClass, RouterLink, RouterLinkActive, TooltipModule, RippleModule],
+	animations: [
+		trigger('children', [
+			state(
+				'collapsed',
+				style({
+					height: '0'
+				})
+			),
+			state(
+				'expanded',
+				style({
+					height: '*'
+				})
+			),
+			state(
+				'hidden',
+				style({
+					display: 'none'
+				})
+			),
+			state(
+				'visible',
+				style({
+					display: 'block'
+				})
+			),
+			transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+		])
+	],
+	styles: [
+		'.active-root-menu-item { background-color: var(--primary-color); & > i,span { color: var(--primary-foreground) !important; } & > span { font-weight: 700; } }'
+	]
+})
+export class AppMenuItemComponent implements OnInit, OnDestroy {
+	@Input() item!: PluginMenuItem;
+
+	@Input() index!: number;
+
+	@Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
+
+	@Input() parentKey!: string;
+
+	@ViewChild('submenu') submenu!: ElementRef;
+
+	active = false;
+
+	menuSourceSubscription: Subscription;
+
+	menuResetSubscription: Subscription;
+
+	key: string = '';
+
+	activeLang = toSignal(this.translocoService.langChanges$);
+
+	constructor(
+		public layoutService: LayoutService,
+		public router: Router,
+		public menuService: AppMenuService,
+		private readonly translocoService: TranslocoService
+	) {
+		this.menuSourceSubscription = this.menuService.menuSource$.subscribe((value) => {
+			Promise.resolve(null).then(() => {
+				if (value.routeEvent) {
+					this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
+				} else {
+					if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+						this.active = false;
+					}
+				}
+			});
+		});
+
+		this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+			this.active = false;
+		});
+
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params: any) => {
+			if (this.isSlimPlus || this.isSlim || this.isHorizontal) {
+				if (!this.layoutService.mfeAppItemClicked()) this.active = false;
+			} else {
+				if (this.item.routerLink) {
+					this.updateActiveStateFromRoute();
+				}
+			}
+
+			if (
+				this.item.routerLink === params.url ||
+				this.item.routerLink === params.urlAfterRedirects ||
+				(this.item.routerLink &&
+					this.router.isActive(this.item.routerLink, {
+						matrixParams: 'ignored',
+						queryParams: 'ignored',
+						fragment: 'ignored',
+						paths: 'subset'
+					}))
+			) {
+				this.menuService.activeRootMenuItemKey.set(this.key.charAt(0));
+			}
+		});
+	}
+
+	ngOnInit() {
+		this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+		if (!(this.isSlimPlus || this.isSlim || this.isHorizontal) && this.item.routerLink) {
+			this.updateActiveStateFromRoute();
+		}
+	}
+
+	ngAfterViewChecked() {
+		if (
+			this.root &&
+			this.active &&
+			this.layoutService.isDesktop() &&
+			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
+		) {
+			this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
+		}
+	}
+
+	updateActiveStateFromRoute() {
+		let activeRoute = this.router.isActive(this.item.routerLink![0], {
+			paths: 'exact',
+			queryParams: 'ignored',
+			matrixParams: 'ignored',
+			fragment: 'ignored'
+		});
+
+		if (activeRoute) {
+			this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
+		}
+	}
+
+	onSubmenuAnimated(event: AnimationEvent) {
+		if (
+			event.toState === 'visible' &&
+			this.layoutService.isDesktop() &&
+			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
+		) {
+			const el = <HTMLUListElement>event.element;
+			const elParent = <HTMLUListElement>el.parentElement;
+			this.calculatePosition(el, elParent);
+		}
+	}
+
+	calculatePosition(overlay: HTMLElement, target: HTMLElement) {
+		if (overlay) {
+			const { left, top } = target.getBoundingClientRect();
+			const [vWidth, vHeight] = [window.innerWidth, window.innerHeight];
+			const [oWidth, oHeight] = [overlay.offsetWidth, overlay.offsetHeight];
+			const scrollbarWidth = DomHandler.calculateScrollbarWidth();
+			// reset
+			overlay.style.top = '';
+			overlay.style.left = '';
+
+			if (this.layoutService.isHorizontal()) {
+				const width = left + oWidth + scrollbarWidth;
+				overlay.style.left = vWidth < width ? `${left - (width - vWidth)}px` : `${left}px`;
+			} else if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+				const height = top + oHeight;
+				overlay.style.top = vHeight < height ? `${top - (height - vHeight)}px` : `${top}px`;
+			}
+		}
+	}
+
+	itemClick(event: Event) {
+		// avoid processing disabled items
+		if (this.item.disabled) {
+			event.preventDefault();
+			return;
+		}
+
+		// navigate with hover
+		if ((this.root && this.isSlim) || this.isHorizontal || this.isSlimPlus) {
+			this.layoutService.state.menuHoverActive = !this.layoutService.state.menuHoverActive;
+		}
+
+		// execute command
+		if (this.item.command) {
+			this.item.command({ originalEvent: event, item: this.item as unknown as MenuItem });
+		}
+
+		// toggle active state
+		if (this.item.items) {
+			this.active = !this.active;
+
+			if (this.root && this.active && (this.isSlim || this.isHorizontal || this.isSlimPlus)) {
+				this.layoutService.onOverlaySubmenuOpen();
+			}
+		} else {
+			if (this.layoutService.isMobile()) {
+				this.layoutService.state.staticMenuMobileActive = false;
+			}
+
+			if (this.isSlim || this.isHorizontal || this.isSlimPlus) {
+				this.menuService.reset();
+				this.layoutService.state.menuHoverActive = false;
+			}
+		}
+
+		this.menuService.onMenuStateChange({ key: this.key });
+	}
+
+	onMouseEnter() {
+		// activate item on hover
+		if ((<any>globalThis).isHostMode && !this.item.items?.length) return;
+
+		if (this.root && (this.isSlim || this.isHorizontal || this.isSlimPlus) && this.layoutService.isDesktop()) {
+			if (this.layoutService.state.menuHoverActive) {
+				this.active = true;
+				this.menuService.onMenuStateChange({ key: this.key });
+			}
+		}
+	}
+
+	get submenuAnimation() {
+		if (
+			this.layoutService.isDesktop() &&
+			(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())
+		) {
+			return this.active ? 'visible' : 'hidden';
+		} else
+			return (
+				this.root ? 'expanded'
+				: this.active ? 'expanded'
+				: 'collapsed'
+			);
+	}
+
+	get isHorizontal() {
+		return this.layoutService.isHorizontal();
+	}
+
+	get isSlim() {
+		return this.layoutService.isSlim();
+	}
+
+	get isSlimPlus() {
+		return this.layoutService.isSlimPlus();
+	}
+
+	@HostBinding('class.active-menuitem')
+	get activeClass() {
+		return this.active && !this.root;
+	}
+
+	ngOnDestroy() {
+		if (this.menuSourceSubscription) {
+			this.menuSourceSubscription.unsubscribe();
+		}
+
+		if (this.menuResetSubscription) {
+			this.menuResetSubscription.unsubscribe();
+		}
+	}
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-menu',
+	imports: [AppMenuItemComponent],
+	templateUrl: './app.menu.component.html'
+})
+export class AppMenuComponent {
+	menuService = inject(AppMenuService);
+	isHostMode = (<any>globalThis).isHostMode;
+	hostMenuItems = (<any>globalThis).hostMenuItems;
+}