aril 0.0.39 → 0.0.40

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

@@ -1,142 +1,142 @@
-<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>
+<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

@@ -1,143 +1,143 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { ButtonModule } from 'primeng/button';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { SidebarModule } from 'primeng/sidebar';
-
-import { ColorScheme, LayoutService, MenuColorScheme, MenuMode } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.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: AppMenuService
-	) {}
-
-	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++;
-	}
-}
+import { NgClass, NgStyle } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { SidebarModule } from 'primeng/sidebar';
+
+import { ColorScheme, LayoutService, MenuColorScheme, MenuMode } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.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: AppMenuService
+	) {}
+
+	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.html

@@ -1,19 +1,19 @@
-<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>
-
-<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>
+<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>
+
+<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>