aril 1.1.65 → 1.1.66

package/theme/layout/service/app.layout.service.ts

@@ -1,308 +1,308 @@
-import { Injectable, effect, signal } from '@angular/core';
-
-import { Subject } from 'rxjs';
-
-export type MenuMode = 'static' | 'expandable';
-
-export type ColorScheme = 'light' | 'dark' | 'dim';
-
-export type MenuColorScheme = 'colorScheme' | 'primaryColor' | 'transparent';
-
-export interface AppConfig {
-	inputStyle: string;
-	colorScheme: ColorScheme;
-	theme: string;
-	ripple: boolean;
-	menuMode: MenuMode;
-	scale: number;
-	menuTheme: MenuColorScheme;
-}
-
-interface LayoutState {
-	// Static sidebar states
-	staticSidebarVisible: boolean;
-	staticSidebarCollapsed: boolean;
-	staticMenuMobileActive: boolean;
-	
-	// Expandable menu states
-	selectedMainItem: number | null;
-	secondarySidebarExpanded: boolean;
-	
-	// Other sidebar states
-	profileSidebarVisible: boolean;
-	historySidebarVisible: boolean;
-	siteMapSidebarVisible: boolean;
-	favoritePagesSidebarVisible: boolean;
-	notificationsSidebarVisible: boolean;
-	
-	// Notifications
-	unreadNotificationCount: number;
-}
-
-@Injectable({
-	providedIn: 'root'
-})
-export class LayoutService {
-
-	_config: AppConfig = {
-		ripple: false,
-		inputStyle: 'outlined',
-		menuMode: localStorage.getItem('menu-mode') as MenuMode || 'static',
-		colorScheme: 'light',
-		theme: 'indigo',
-		scale: 12,
-		menuTheme: 'colorScheme'
-	};
-
-	// TODO: Set User Config
-	config = signal<AppConfig>(this._config);
-
-	state: LayoutState = {
-		// Static sidebar states
-		staticSidebarVisible: true,
-		staticSidebarCollapsed: false,
-		staticMenuMobileActive: false,
-		
-		// Expandable menu states
-		selectedMainItem: null,
-		secondarySidebarExpanded: false,
-		
-		// Other sidebar states
-		profileSidebarVisible: false,
-		historySidebarVisible: false,
-		siteMapSidebarVisible: false,
-		favoritePagesSidebarVisible: false,
-		notificationsSidebarVisible: false,
-		
-		// Notifications
-		unreadNotificationCount: 0
-	};
-
-	private configUpdate = new Subject<AppConfig>();
-	private overlayOpen = new Subject<any>();
-
-	configUpdate$ = this.configUpdate.asObservable();
-	overlayOpen$ = this.overlayOpen.asObservable();
-
-	mfeAppItemClicked = signal<boolean>(false);
-
-	// Breakpoint for mobile/tablet detection
-	private readonly MOBILE_BREAKPOINT = 992;
-
-	constructor() {
-		effect(() => {
-			const config = this.config();
-			if (this.updateStyle(config)) {
-				this.changeTheme();
-			}
-			this.changeScale(config.scale);
-			this.onConfigUpdate();
-		});
-
-		this.initializeResponsiveBehavior();
-				
-		// Set initial state based on menu mode
-		if (this.config().menuMode === 'expandable') {
-			this.state.staticSidebarVisible = false;
-		}
-	}
-
-	private initializeResponsiveBehavior() {
-		// Listen for window resize events
-		window.addEventListener('resize', () => this.handleResize());
-			this.handleResize();
-	}
-
-	private handleResize() {
-		const wasMobile = this.isMobile();
-		
-		// Recalculate mobile state
-		const isMobileNow = window.innerWidth <= this.MOBILE_BREAKPOINT;
-		
-		// If switching from mobile to desktop or vice versa
-		if (wasMobile !== isMobileNow) {
-			if (isMobileNow) {
-				// Switching to mobile: close any open desktop menus
-				this.state.staticSidebarVisible = true;
-				this.state.staticMenuMobileActive = false;
-				// For expandable menu, keep secondary sidebar state but handle mobile behavior
-			} else {
-				// Switching to desktop: ensure proper desktop state
-				this.state.staticMenuMobileActive = false;
-				this.state.staticSidebarVisible = true;
-			}
-		}
-	}
-
-	updateStyle(config: AppConfig) {
-		return config.theme !== this._config.theme || config.colorScheme !== this._config.colorScheme;
-	}
-
-	onMenuToggle() {
-		if (this.isMobile()) {
-			this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
-			
-			if (this.state.staticMenuMobileActive) {
-				this.overlayOpen.next(null);
-			}
-		} else {
-			if (this.config().menuMode === 'static') {
-				if (this.state.staticSidebarVisible && !this.state.staticSidebarCollapsed) {
-					this.state.staticSidebarCollapsed = true;
-				} else if (this.state.staticSidebarVisible && this.state.staticSidebarCollapsed) {
-					this.state.staticSidebarCollapsed = false;
-				} else {
-					this.state.staticSidebarVisible = true;
-					this.state.staticSidebarCollapsed = false;
-				}
-			}
-			// For expandable mode, the toggle is handled by the expandable component itself
-		}
-	}
-
-	onOverlaySubmenuOpen() {
-		this.overlayOpen.next(null);
-	}
-
-	// Expandable menu methods
-	setSelectedMainItem(index: number | null) {
-		this.state.selectedMainItem = index;
-	}
-
-	toggleSecondarySidebar() {
-		this.state.secondarySidebarExpanded = !this.state.secondarySidebarExpanded;
-	}
-
-	setSecondarySidebarExpanded(expanded: boolean) {
-		this.state.secondarySidebarExpanded = expanded;
-	}
-
-	// Sidebar show methods
-	showProfileSidebar() {
-		this.state.profileSidebarVisible = true;
-	}
-
-	showHistorySidebar() {
-		this.state.historySidebarVisible = true;
-	}
-
-	showSiteMapSidebar() {
-		this.state.siteMapSidebarVisible = true;
-	}
-
-	showFavoritePagesSidebar() {
-		this.state.favoritePagesSidebarVisible = true;
-	}
-
-	showNotificationsSidebar() {
-		this.state.notificationsSidebarVisible = true;
-	}
-
-	setUnreadNotificationCount(count: number) {
-		this.state.unreadNotificationCount = count;
-	}
-
-	getUnreadNotificationCount(): number {
-		return this.state.unreadNotificationCount;
-	}
-
-	isDesktop() {
-		return window.innerWidth > this.MOBILE_BREAKPOINT;
-	}
-
-	isMobile() {
-		return window.innerWidth <= this.MOBILE_BREAKPOINT;
-	}
-
-	isStatic() {
-		return this.config().menuMode === 'static';
-	}
-
-	isExpandable() {
-		return this.config().menuMode === 'expandable';
-	}
-
-	// Helper method to determine if static sidebar should be shown
-	shouldShowStaticSidebar(): boolean {
-		if (this.config().menuMode !== 'static') return false;
-		
-		if (this.isDesktop()) {
-			return this.state.staticSidebarVisible;
-		} else {
-			return this.state.staticMenuMobileActive;
-		}
-	}
-
-	isStaticSidebarCollapsed(): boolean {
-		return this.state.staticSidebarCollapsed;
-	}
-
-	shouldShowExpandableMenu(): boolean {
-		return this.config().menuMode === 'expandable';
-	}
-
-	closeMobileMenu() {
-		this.state.staticMenuMobileActive = false;
-	}
-
-	// Change menu mode programmatically
-	changeMenuMode(mode: MenuMode) {
-		this.config.update((config) => ({
-			...config,
-			menuMode: mode
-		}));
-
-		// Update states based on new mode
-		if (mode === 'static') {
-			this.state.staticSidebarVisible = true;
-			this.state.selectedMainItem = null;
-			this.state.secondarySidebarExpanded = false;
-		} else if (mode === 'expandable') {
-			this.state.staticSidebarVisible = false;
-			this.state.selectedMainItem = null;
-			this.state.secondarySidebarExpanded = false;
-		}
-
-		this.state.staticMenuMobileActive = false;
-	}
-
-	onConfigUpdate() {
-		this._config = { ...this.config() };
-		this.configUpdate.next(this.config());
-	}
-
-	changeTheme() {
-		const config = this.config();
-		const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
-		const themeLinkHref = themeLink.getAttribute('href')!;
-		const newHref = themeLinkHref
-			.split('/')
-			.map((el) =>
-				el == this._config.theme ? (el = config.theme)
-				: el == `theme-${this._config.colorScheme}` ? (el = `theme-${config.colorScheme}`)
-				: el
-			)
-			.join('/');
-
-		this.replaceThemeLink(newHref);
-	}
-
-	replaceThemeLink(href: string) {
-		const id = 'theme-link';
-		let themeLink = <HTMLLinkElement>document.getElementById(id);
-		const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
-
-		cloneLinkElement.setAttribute('href', href);
-		cloneLinkElement.setAttribute('id', id + '-clone');
-
-		themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
-		cloneLinkElement.addEventListener('load', () => {
-			themeLink.remove();
-			cloneLinkElement.setAttribute('id', id);
-		});
-	}
-
-	changeScale(value: number) {
-		document.documentElement.style.fontSize = `${value}px`;
-	}
+import { Injectable, effect, signal } from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+export type MenuMode = 'static' | 'expandable';
+
+export type ColorScheme = 'light' | 'dark' | 'dim';
+
+export type MenuColorScheme = 'colorScheme' | 'primaryColor' | 'transparent';
+
+export interface AppConfig {
+	inputStyle: string;
+	colorScheme: ColorScheme;
+	theme: string;
+	ripple: boolean;
+	menuMode: MenuMode;
+	scale: number;
+	menuTheme: MenuColorScheme;
+}
+
+interface LayoutState {
+	// Static sidebar states
+	staticSidebarVisible: boolean;
+	staticSidebarCollapsed: boolean;
+	staticMenuMobileActive: boolean;
+	
+	// Expandable menu states
+	selectedMainItem: number | null;
+	secondarySidebarExpanded: boolean;
+	
+	// Other sidebar states
+	profileSidebarVisible: boolean;
+	historySidebarVisible: boolean;
+	siteMapSidebarVisible: boolean;
+	favoritePagesSidebarVisible: boolean;
+	notificationsSidebarVisible: boolean;
+	
+	// Notifications
+	unreadNotificationCount: number;
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LayoutService {
+
+	_config: AppConfig = {
+		ripple: false,
+		inputStyle: 'outlined',
+		menuMode: localStorage.getItem('menu-mode') as MenuMode || 'static',
+		colorScheme: 'light',
+		theme: 'indigo',
+		scale: 12,
+		menuTheme: 'colorScheme'
+	};
+
+	// TODO: Set User Config
+	config = signal<AppConfig>(this._config);
+
+	state: LayoutState = {
+		// Static sidebar states
+		staticSidebarVisible: true,
+		staticSidebarCollapsed: false,
+		staticMenuMobileActive: false,
+		
+		// Expandable menu states
+		selectedMainItem: null,
+		secondarySidebarExpanded: false,
+		
+		// Other sidebar states
+		profileSidebarVisible: false,
+		historySidebarVisible: false,
+		siteMapSidebarVisible: false,
+		favoritePagesSidebarVisible: false,
+		notificationsSidebarVisible: false,
+		
+		// Notifications
+		unreadNotificationCount: 0
+	};
+
+	private configUpdate = new Subject<AppConfig>();
+	private overlayOpen = new Subject<any>();
+
+	configUpdate$ = this.configUpdate.asObservable();
+	overlayOpen$ = this.overlayOpen.asObservable();
+
+	mfeAppItemClicked = signal<boolean>(false);
+
+	// Breakpoint for mobile/tablet detection
+	private readonly MOBILE_BREAKPOINT = 992;
+
+	constructor() {
+		effect(() => {
+			const config = this.config();
+			if (this.updateStyle(config)) {
+				this.changeTheme();
+			}
+			this.changeScale(config.scale);
+			this.onConfigUpdate();
+		});
+
+		this.initializeResponsiveBehavior();
+				
+		// Set initial state based on menu mode
+		if (this.config().menuMode === 'expandable') {
+			this.state.staticSidebarVisible = false;
+		}
+	}
+
+	private initializeResponsiveBehavior() {
+		// Listen for window resize events
+		window.addEventListener('resize', () => this.handleResize());
+			this.handleResize();
+	}
+
+	private handleResize() {
+		const wasMobile = this.isMobile();
+		
+		// Recalculate mobile state
+		const isMobileNow = window.innerWidth <= this.MOBILE_BREAKPOINT;
+		
+		// If switching from mobile to desktop or vice versa
+		if (wasMobile !== isMobileNow) {
+			if (isMobileNow) {
+				// Switching to mobile: close any open desktop menus
+				this.state.staticSidebarVisible = true;
+				this.state.staticMenuMobileActive = false;
+				// For expandable menu, keep secondary sidebar state but handle mobile behavior
+			} else {
+				// Switching to desktop: ensure proper desktop state
+				this.state.staticMenuMobileActive = false;
+				this.state.staticSidebarVisible = true;
+			}
+		}
+	}
+
+	updateStyle(config: AppConfig) {
+		return config.theme !== this._config.theme || config.colorScheme !== this._config.colorScheme;
+	}
+
+	onMenuToggle() {
+		if (this.isMobile()) {
+			this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+			
+			if (this.state.staticMenuMobileActive) {
+				this.overlayOpen.next(null);
+			}
+		} else {
+			if (this.config().menuMode === 'static') {
+				if (this.state.staticSidebarVisible && !this.state.staticSidebarCollapsed) {
+					this.state.staticSidebarCollapsed = true;
+				} else if (this.state.staticSidebarVisible && this.state.staticSidebarCollapsed) {
+					this.state.staticSidebarCollapsed = false;
+				} else {
+					this.state.staticSidebarVisible = true;
+					this.state.staticSidebarCollapsed = false;
+				}
+			}
+			// For expandable mode, the toggle is handled by the expandable component itself
+		}
+	}
+
+	onOverlaySubmenuOpen() {
+		this.overlayOpen.next(null);
+	}
+
+	// Expandable menu methods
+	setSelectedMainItem(index: number | null) {
+		this.state.selectedMainItem = index;
+	}
+
+	toggleSecondarySidebar() {
+		this.state.secondarySidebarExpanded = !this.state.secondarySidebarExpanded;
+	}
+
+	setSecondarySidebarExpanded(expanded: boolean) {
+		this.state.secondarySidebarExpanded = expanded;
+	}
+
+	// Sidebar show methods
+	showProfileSidebar() {
+		this.state.profileSidebarVisible = true;
+	}
+
+	showHistorySidebar() {
+		this.state.historySidebarVisible = true;
+	}
+
+	showSiteMapSidebar() {
+		this.state.siteMapSidebarVisible = true;
+	}
+
+	showFavoritePagesSidebar() {
+		this.state.favoritePagesSidebarVisible = true;
+	}
+
+	showNotificationsSidebar() {
+		this.state.notificationsSidebarVisible = true;
+	}
+
+	setUnreadNotificationCount(count: number) {
+		this.state.unreadNotificationCount = count;
+	}
+
+	getUnreadNotificationCount(): number {
+		return this.state.unreadNotificationCount;
+	}
+
+	isDesktop() {
+		return window.innerWidth > this.MOBILE_BREAKPOINT;
+	}
+
+	isMobile() {
+		return window.innerWidth <= this.MOBILE_BREAKPOINT;
+	}
+
+	isStatic() {
+		return this.config().menuMode === 'static';
+	}
+
+	isExpandable() {
+		return this.config().menuMode === 'expandable';
+	}
+
+	// Helper method to determine if static sidebar should be shown
+	shouldShowStaticSidebar(): boolean {
+		if (this.config().menuMode !== 'static') return false;
+		
+		if (this.isDesktop()) {
+			return this.state.staticSidebarVisible;
+		} else {
+			return this.state.staticMenuMobileActive;
+		}
+	}
+
+	isStaticSidebarCollapsed(): boolean {
+		return this.state.staticSidebarCollapsed;
+	}
+
+	shouldShowExpandableMenu(): boolean {
+		return this.config().menuMode === 'expandable';
+	}
+
+	closeMobileMenu() {
+		this.state.staticMenuMobileActive = false;
+	}
+
+	// Change menu mode programmatically
+	changeMenuMode(mode: MenuMode) {
+		this.config.update((config) => ({
+			...config,
+			menuMode: mode
+		}));
+
+		// Update states based on new mode
+		if (mode === 'static') {
+			this.state.staticSidebarVisible = true;
+			this.state.selectedMainItem = null;
+			this.state.secondarySidebarExpanded = false;
+		} else if (mode === 'expandable') {
+			this.state.staticSidebarVisible = false;
+			this.state.selectedMainItem = null;
+			this.state.secondarySidebarExpanded = false;
+		}
+
+		this.state.staticMenuMobileActive = false;
+	}
+
+	onConfigUpdate() {
+		this._config = { ...this.config() };
+		this.configUpdate.next(this.config());
+	}
+
+	changeTheme() {
+		const config = this.config();
+		const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+		const themeLinkHref = themeLink.getAttribute('href')!;
+		const newHref = themeLinkHref
+			.split('/')
+			.map((el) =>
+				el == this._config.theme ? (el = config.theme)
+				: el == `theme-${this._config.colorScheme}` ? (el = `theme-${config.colorScheme}`)
+				: el
+			)
+			.join('/');
+
+		this.replaceThemeLink(newHref);
+	}
+
+	replaceThemeLink(href: string) {
+		const id = 'theme-link';
+		let themeLink = <HTMLLinkElement>document.getElementById(id);
+		const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
+
+		cloneLinkElement.setAttribute('href', href);
+		cloneLinkElement.setAttribute('id', id + '-clone');
+
+		themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
+		cloneLinkElement.addEventListener('load', () => {
+			themeLink.remove();
+			cloneLinkElement.setAttribute('id', id);
+		});
+	}
+
+	changeScale(value: number) {
+		document.documentElement.style.fontSize = `${value}px`;
+	}
 }