aril 0.0.5 → 0.0.7

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

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { MenuService } from '../../service/app.menu.service';
+import { ColorScheme, LayoutService, MenuColorScheme, MenuMode } from '../../service/app.layout.service';
+import * as i0 from "@angular/core";
+export declare class AppConfigComponent implements OnInit {
+    layoutService: LayoutService;
+    menuService: MenuService;
+    minimal: boolean;
+    componentThemes: any[];
+    scales: number[];
+    constructor(layoutService: LayoutService, menuService: MenuService);
+    get visible(): boolean;
+    set visible(_val: boolean);
+    get scale(): number;
+    set scale(_val: number);
+    get menuMode(): MenuMode;
+    set menuMode(_val: MenuMode);
+    get colorScheme(): ColorScheme;
+    set colorScheme(_val: ColorScheme);
+    get inputStyle(): string;
+    set inputStyle(_val: string);
+    get ripple(): boolean;
+    set ripple(_val: boolean);
+    get menuTheme(): MenuColorScheme;
+    set menuTheme(_val: MenuColorScheme);
+    get theme(): string;
+    set theme(_val: string);
+    ngOnInit(): void;
+    onConfigButtonClick(): void;
+    changeColorScheme(colorScheme: ColorScheme): void;
+    changeTheme(theme: string): void;
+    decrementScale(): void;
+    incrementScale(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppConfigComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppConfigComponent, "app-config", never, { "minimal": { "alias": "minimal"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,191 @@
+<button
+	class="layout-config-button p-link"
+	type="button"
+	(click)="onConfigButtonClick()">
+	<i class="pi pi-cog"></i>
+</button>
+
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-config-sidebar w-18rem">
+	<h5>Themes</h5>
+	<div class="flex flex-wrap row-gap-3">
+		@for (theme of componentThemes; track theme) {
+			<div class="w-3">
+				<button
+					type="button"
+					class="cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center"
+					(click)="changeTheme(theme.name)"
+					[ngStyle]="{ 'background-color': theme.color }">
+					@if (theme.name == this.layoutService.config().theme) {
+						<i class="pi pi-check text-white"></i>
+					}
+				</button>
+			</div>
+		}
+	</div>
+
+	<h5>Scale</h5>
+	<div class="flex align-items-center">
+		<button
+			icon="pi pi-minus"
+			type="button"
+			pButton
+			(click)="decrementScale()"
+			class="p-button-text p-button-rounded w-2rem h-2rem mr-2"
+			[disabled]="scale === scales[0]"></button>
+		<div class="flex gap-2 align-items-center">
+			@for (s of scales; track s) {
+				<i
+					class="pi pi-circle-fill text-300"
+					[ngClass]="{ 'text-primary-500': s === scale }"></i>
+			}
+		</div>
+		<button
+			icon="pi pi-plus"
+			type="button"
+			pButton
+			(click)="incrementScale()"
+			class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
+			[disabled]="scale === scales[scales.length - 1]"></button>
+	</div>
+
+	@if (!minimal) {
+		<h5>Menu Type</h5>
+		<div class="flex flex-wrap row-gap-3">
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="static"
+					[(ngModel)]="menuMode"
+					inputId="mode1"></p-radioButton>
+				<label for="mode1">Static</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="overlay"
+					[(ngModel)]="menuMode"
+					inputId="mode2"></p-radioButton>
+				<label for="mode2">Overlay</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="slim"
+					[(ngModel)]="menuMode"
+					inputId="mode3"></p-radioButton>
+				<label for="mode3">Slim</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="slim-plus"
+					[(ngModel)]="menuMode"
+					inputId="mode4"></p-radioButton>
+				<label for="mode3">Slim +</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="reveal"
+					[(ngModel)]="menuMode"
+					inputId="mode6"></p-radioButton>
+				<label for="mode5">Reveal</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="drawer"
+					[(ngModel)]="menuMode"
+					inputId="mode7"></p-radioButton>
+				<label for="mode6">Drawer</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="horizontal"
+					[(ngModel)]="menuMode"
+					inputId="mode5"></p-radioButton>
+				<label for="mode4">Horizontal</label>
+			</div>
+		</div>
+		<h5>Menu Theme</h5>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="colorScheme"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-colorscheme"></p-radioButton>
+			<label for="menutheme-colorscheme">Color Scheme</label>
+		</div>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="primaryColor"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-primarycolor"></p-radioButton>
+			<label for="menutheme-primarycolor">Primary Color</label>
+		</div>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="transparent"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-transparent"></p-radioButton>
+			<label for="menutheme-transparent">Transparent</label>
+		</div>
+	}
+
+	<h5>Color Scheme</h5>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="light"
+			[(ngModel)]="colorScheme"
+			inputId="mode-light"></p-radioButton>
+		<label for="mode-light">Light</label>
+	</div>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="dim"
+			[(ngModel)]="colorScheme"
+			inputId="mode-dim"></p-radioButton>
+		<label for="mode-dim">Dim</label>
+	</div>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="dark"
+			[(ngModel)]="colorScheme"
+			inputId="mode-dark"></p-radioButton>
+		<label for="mode-dark">Dark</label>
+	</div>
+
+	@if (!minimal) {
+		<h5>Input Style</h5>
+		<div class="flex">
+			<div class="field-radiobutton flex-1">
+				<p-radioButton
+					name="inputStyle"
+					value="outlined"
+					[(ngModel)]="inputStyle"
+					inputId="outlined_input"></p-radioButton>
+				<label for="outlined_input">Outlined</label>
+			</div>
+			<div class="field-radiobutton flex-1">
+				<p-radioButton
+					name="inputStyle"
+					value="filled"
+					[(ngModel)]="inputStyle"
+					inputId="filled_input"></p-radioButton>
+				<label for="filled_input">Filled</label>
+			</div>
+		</div>
+		<h5>Ripple Effect</h5>
+		<p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
+	}
+</p-sidebar>

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

@@ -0,0 +1,152 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgClass, NgStyle } from '@angular/common';
+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 { MenuService } from '../../service/app.menu.service';
+import {
+	ColorScheme,
+	LayoutService,
+	MenuColorScheme,
+	MenuMode,
+} from '../../service/app.layout.service';
+
+@Component({
+	standalone: true,
+	selector: 'app-config',
+	imports: [FormsModule, SidebarModule, RadioButtonModule, ButtonModule, InputSwitchModule, NgStyle, NgClass],
+	templateUrl: './app.config.component.html',
+})
+export class AppConfigComponent implements OnInit {
+	@Input() minimal: boolean = false;
+
+	componentThemes: any[] = [];
+
+	scales: number[] = [12, 13, 14, 15, 16];
+
+	constructor(
+		public layoutService: LayoutService,
+		public menuService: MenuService
+	) { }
+
+	get visible(): boolean {
+		return this.layoutService.state.configSidebarVisible;
+	}
+	set visible(_val: boolean) {
+		this.layoutService.state.configSidebarVisible = _val;
+	}
+
+	get scale(): number {
+		return this.layoutService.config().scale;
+	}
+	set scale(_val: number) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			scale: _val,
+		}));
+	}
+
+	get menuMode(): MenuMode {
+		return this.layoutService.config().menuMode;
+	}
+	set menuMode(_val: MenuMode) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			menuMode: _val,
+		}));
+		if (
+			this.layoutService.isSlimPlus() ||
+			this.layoutService.isSlim() ||
+			this.layoutService.isHorizontal()
+		) {
+			this.menuService.reset();
+		}
+	}
+
+	get colorScheme(): ColorScheme {
+		return this.layoutService.config().colorScheme;
+	}
+	set colorScheme(_val: ColorScheme) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			colorScheme: _val,
+		}));
+	}
+
+	get inputStyle(): string {
+		return this.layoutService.config().inputStyle;
+	}
+	set inputStyle(_val: string) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			inputStyle: _val,
+		}));
+	}
+
+	get ripple(): boolean {
+		return this.layoutService.config().ripple;
+	}
+	set ripple(_val: boolean) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			ripple: _val,
+		}));
+	}
+
+	get menuTheme(): MenuColorScheme {
+		return this.layoutService.config().menuTheme;
+	}
+	set menuTheme(_val: MenuColorScheme) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			menuTheme: _val,
+		}));
+	}
+
+	get theme(): string {
+		return this.layoutService.config().theme;
+	}
+	set theme(_val: string) {
+		this.layoutService.config.update((config) => ({
+			...config,
+			theme: _val,
+		}));
+	}
+
+	ngOnInit() {
+		this.componentThemes = [
+			{ name: 'indigo', color: '#6366F1' },
+			{ name: 'blue', color: '#3B82F6' },
+			{ name: 'purple', color: '#8B5CF6' },
+			{ name: 'teal', color: '#14B8A6' },
+			{ name: 'cyan', color: '#06b6d4' },
+			{ name: 'green', color: '#10b981' },
+			{ name: 'orange', color: '#f59e0b' },
+			{ name: 'pink', color: '#d946ef' },
+		];
+	}
+
+	onConfigButtonClick() {
+		this.layoutService.showConfigSidebar();
+	}
+
+	changeColorScheme(colorScheme: ColorScheme) {
+		this.colorScheme = colorScheme;
+	}
+
+	changeTheme(theme: string) {
+		this.theme = theme;
+	}
+
+	decrementScale() {
+		this.scale--;
+	}
+
+	incrementScale() {
+		this.scale++;
+	}
+}

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

@@ -0,0 +1,51 @@
+import { OnDestroy, Renderer2 } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { MenuService } 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;
+    layoutService: LayoutService;
+    renderer: Renderer2;
+    router: Router;
+    private route;
+    sidebarItems: import("@angular/core").InputSignal<MenuItem[], MenuItem[]>;
+    overlayMenuOpenSubscription: Subscription;
+    menuOutsideClickListener: any;
+    menuScrollListener: any;
+    appSidebar: AppSidebarComponent;
+    appTopbar: AppTopbarComponent;
+    constructor(menuService: MenuService, layoutService: LayoutService, renderer: Renderer2, router: Router, route: ActivatedRoute);
+    blockBodyScroll(): void;
+    unblockBodyScroll(): void;
+    hideMenu(): void;
+    get containerClass(): {
+        'layout-light': boolean;
+        'layout-dim': boolean;
+        'layout-dark': boolean;
+        'layout-colorscheme-menu': boolean;
+        'layout-primarycolor-menu': boolean;
+        'layout-transparent-menu': boolean;
+        'layout-overlay': boolean;
+        'layout-static': boolean;
+        'layout-slim': boolean;
+        'layout-slim-plus': boolean;
+        'layout-horizontal': boolean;
+        'layout-reveal': boolean;
+        'layout-drawer': boolean;
+        'layout-static-inactive': boolean;
+        'layout-overlay-active': boolean;
+        'layout-mobile-active': boolean;
+        'p-input-filled': boolean;
+        'p-ripple-disabled': boolean;
+        'layout-sidebar-active': boolean;
+        'layout-sidebar-anchored': boolean;
+    };
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppLayoutComponent, "app-layout", never, { "sidebarItems": { "alias": "sidebarItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,13 @@
+<div class="layout-container" [ngClass]="containerClass">
+	<app-sidebar></app-sidebar>
+	<div class="layout-content-wrapper">
+		<app-topbar></app-topbar>
+		<!-- <app-breadcrumb class="content-breadcrumb"></app-breadcrumb> -->
+		<div class="layout-content">
+			<router-outlet></router-outlet>
+		</div>
+	</div>
+	<app-profilemenu></app-profilemenu>
+	<app-config></app-config>
+	<div class="layout-mask"></div>
+</div>

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

@@ -0,0 +1,183 @@
+import { NgClass } from '@angular/common';
+import { Component, OnDestroy, Renderer2, ViewChild, effect, input } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
+
+import { MenuItem } from 'primeng/api';
+import { filter, Subscription } from 'rxjs';
+
+import { MenuService } 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';
+
+@Component({
+	standalone: true,
+	selector: 'app-layout',
+	imports: [NgClass, RouterOutlet, AppSidebarComponent, AppTopbarComponent, AppBreadcrumbComponent, AppProfileSidebarComponent, AppConfigComponent],
+	templateUrl: './app.layout.component.html'
+})
+export class AppLayoutComponent implements OnDestroy {
+	sidebarItems = input<MenuItem[]>([]);
+
+	overlayMenuOpenSubscription: Subscription;
+
+	menuOutsideClickListener: any;
+
+	menuScrollListener: any;
+
+	@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+
+	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
+
+	constructor(
+		private menuService: MenuService,
+		public layoutService: LayoutService,
+		public renderer: Renderer2,
+		public router: Router,
+		private route: ActivatedRoute
+	) {
+		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();
+		});
+
+		effect(() => {
+			this.menuService.menuItems.set(this.sidebarItems());
+		}, { allowSignalWrites: true });
+	}
+
+	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/menu/app.menu.component.d.ts

@@ -0,0 +1,44 @@
+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 { MenuService } from '../../service/app.menu.service';
+import { LayoutService } from '../../service/app.layout.service';
+import * as i0 from "@angular/core";
+export declare class AppMenuItemComponent implements OnInit, OnDestroy {
+    layoutService: LayoutService;
+    private cd;
+    router: Router;
+    private menuService;
+    item: MenuItem;
+    index: number;
+    root: boolean;
+    parentKey: string;
+    submenu: ElementRef;
+    active: boolean;
+    menuSourceSubscription: Subscription;
+    menuResetSubscription: Subscription;
+    key: string;
+    constructor(layoutService: LayoutService, cd: ChangeDetectorRef, router: Router, menuService: MenuService);
+    ngOnInit(): void;
+    ngAfterViewChecked(): void;
+    updateActiveStateFromRoute(): void;
+    onSubmenuAnimated(event: AnimationEvent): void;
+    calculatePosition(overlay: HTMLElement, target: HTMLElement): void;
+    itemClick(event: Event): void;
+    onMouseEnter(): void;
+    get submenuAnimation(): "collapsed" | "expanded" | "hidden" | "visible";
+    get isHorizontal(): boolean;
+    get isSlim(): boolean;
+    get isSlimPlus(): boolean;
+    get activeClass(): boolean;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppMenuItemComponent, "[app-menuitem]", never, { "item": { "alias": "item"; "required": false; }; "index": { "alias": "index"; "required": false; }; "root": { "alias": "root"; "required": false; }; "parentKey": { "alias": "parentKey"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class AppMenuComponent {
+    menuService: MenuService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppMenuComponent, "app-menu", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,9 @@
+<ul class="layout-menu">
+	@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>