aril 0.0.7 → 0.0.9

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

@@ -1,7 +1,4 @@
-<button
-	class="layout-config-button p-link"
-	type="button"
-	(click)="onConfigButtonClick()">
+<button class="layout-config-button p-link" type="button" (click)="onConfigButtonClick()">
 	<i class="pi pi-cog"></i>
 </button>
 
@@ -38,9 +35,7 @@
 			[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>
+				<i class="pi pi-circle-fill text-300" [ngClass]="{ 'text-primary-500': s === scale }"></i>
 			}
 		</div>
 		<button
@@ -56,59 +51,31 @@
 		<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>
+				<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>
+				<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>
+				<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>
+				<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>
+				<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>
+				<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>
+				<p-radioButton name="menuMode" value="horizontal" [(ngModel)]="menuMode" inputId="mode5"></p-radioButton>
 				<label for="mode4">Horizontal</label>
 			</div>
 		</div>
@@ -141,27 +108,15 @@
 
 	<h5>Color Scheme</h5>
 	<div class="field-radiobutton">
-		<p-radioButton
-			name="colorScheme"
-			value="light"
-			[(ngModel)]="colorScheme"
-			inputId="mode-light"></p-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>
+		<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>
+		<p-radioButton name="colorScheme" value="dark" [(ngModel)]="colorScheme" inputId="mode-dark"></p-radioButton>
 		<label for="mode-dark">Dark</label>
 	</div>
 
@@ -177,11 +132,7 @@
 				<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>
+				<p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></p-radioButton>
 				<label for="filled_input">Filled</label>
 			</div>
 		</div>

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

@@ -8,18 +8,13 @@ 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';
+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',
+	templateUrl: './app.config.component.html'
 })
 export class AppConfigComponent implements OnInit {
 	@Input() minimal: boolean = false;
@@ -31,7 +26,7 @@ export class AppConfigComponent implements OnInit {
 	constructor(
 		public layoutService: LayoutService,
 		public menuService: MenuService
-	) { }
+	) {}
 
 	get visible(): boolean {
 		return this.layoutService.state.configSidebarVisible;
@@ -46,7 +41,7 @@ export class AppConfigComponent implements OnInit {
 	set scale(_val: number) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			scale: _val,
+			scale: _val
 		}));
 	}
 
@@ -56,13 +51,9 @@ export class AppConfigComponent implements OnInit {
 	set menuMode(_val: MenuMode) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			menuMode: _val,
+			menuMode: _val
 		}));
-		if (
-			this.layoutService.isSlimPlus() ||
-			this.layoutService.isSlim() ||
-			this.layoutService.isHorizontal()
-		) {
+		if (this.layoutService.isSlimPlus() || this.layoutService.isSlim() || this.layoutService.isHorizontal()) {
 			this.menuService.reset();
 		}
 	}
@@ -73,7 +64,7 @@ export class AppConfigComponent implements OnInit {
 	set colorScheme(_val: ColorScheme) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			colorScheme: _val,
+			colorScheme: _val
 		}));
 	}
 
@@ -83,7 +74,7 @@ export class AppConfigComponent implements OnInit {
 	set inputStyle(_val: string) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			inputStyle: _val,
+			inputStyle: _val
 		}));
 	}
 
@@ -93,7 +84,7 @@ export class AppConfigComponent implements OnInit {
 	set ripple(_val: boolean) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			ripple: _val,
+			ripple: _val
 		}));
 	}
 
@@ -103,7 +94,7 @@ export class AppConfigComponent implements OnInit {
 	set menuTheme(_val: MenuColorScheme) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			menuTheme: _val,
+			menuTheme: _val
 		}));
 	}
 
@@ -113,7 +104,7 @@ export class AppConfigComponent implements OnInit {
 	set theme(_val: string) {
 		this.layoutService.config.update((config) => ({
 			...config,
-			theme: _val,
+			theme: _val
 		}));
 	}
 
@@ -126,7 +117,7 @@ export class AppConfigComponent implements OnInit {
 			{ name: 'cyan', color: '#06b6d4' },
 			{ name: 'green', color: '#10b981' },
 			{ name: 'orange', color: '#f59e0b' },
-			{ name: 'pink', color: '#d946ef' },
+			{ name: 'pink', color: '#d946ef' }
 		];
 	}
 

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

@@ -16,7 +16,15 @@ import { AppConfigComponent } from '../config/app.config.component';
 @Component({
 	standalone: true,
 	selector: 'app-layout',
-	imports: [NgClass, RouterOutlet, AppSidebarComponent, AppTopbarComponent, AppBreadcrumbComponent, AppProfileSidebarComponent, AppConfigComponent],
+	imports: [
+		NgClass,
+		RouterOutlet,
+		AppSidebarComponent,
+		AppTopbarComponent,
+		AppBreadcrumbComponent,
+		AppProfileSidebarComponent,
+		AppConfigComponent
+	],
 	templateUrl: './app.layout.component.html'
 })
 export class AppLayoutComponent implements OnDestroy {
@@ -41,33 +49,23 @@ export class AppLayoutComponent implements OnDestroy {
 	) {
 		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();
-						}
+				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.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus()) &&
+				!this.menuScrollListener
+			) {
 				this.menuScrollListener = this.renderer.listen(
 					this.appSidebar.menuContainer.nativeElement,
 					'scroll',
@@ -88,9 +86,12 @@ export class AppLayoutComponent implements OnDestroy {
 			this.hideMenu();
 		});
 
-		effect(() => {
-			this.menuService.menuItems.set(this.sidebarItems());
-		}, { allowSignalWrites: true });
+		effect(
+			() => {
+				this.menuService.menuItems.set(this.sidebarItems());
+			},
+			{ allowSignalWrites: true }
+		);
 	}
 
 	blockBodyScroll(): void {
@@ -106,12 +107,7 @@ export class AppLayoutComponent implements OnDestroy {
 			document.body.classList.remove('blocked-scroll');
 		} else {
 			document.body.className = document.body.className.replace(
-				new RegExp(
-					'(^|\\b)' +
-					'blocked-scroll'.split(' ').join('|') +
-					'(\\b|$)',
-					'gi'
-				),
+				new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
 				' '
 			);
 		}
@@ -141,33 +137,24 @@ export class AppLayoutComponent implements OnDestroy {
 			'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-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-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',
+				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',
+			'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,
+			'layout-sidebar-anchored': this.layoutService.state.anchored
 		};
 	}