aril 0.0.6 → 0.0.8

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

@@ -0,0 +1,28 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-topbar',
+	imports: [ButtonModule, AppBreadcrumbComponent],
+	templateUrl: './app.topbar.component.html'
+})
+export class AppTopbarComponent {
+	@ViewChild('menubutton') menuButton!: ElementRef;
+
+	constructor(public layoutService: LayoutService) {}
+
+	onMenuButtonClick() {
+		this.layoutService.onMenuToggle();
+	}
+
+	onProfileButtonClick() {
+		this.layoutService.showProfileSidebar();
+	}
+	onConfigButtonClick() {
+		this.layoutService.showConfigSidebar();
+	}
+}

package/theme/layout/index.d.ts

@@ -0,0 +1 @@
+export * from './app/layout/app.layout.component';

package/theme/layout/index.ts

@@ -0,0 +1 @@
+export * from './app/layout/app.layout.component';

package/theme/layout/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

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

@@ -0,0 +1,51 @@
+import * as i0 from "@angular/core";
+export type MenuMode = 'static' | 'overlay' | 'horizontal' | 'slim' | 'slim-plus' | 'reveal' | 'drawer';
+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 {
+    staticMenuDesktopInactive: boolean;
+    overlayMenuActive: boolean;
+    profileSidebarVisible: boolean;
+    configSidebarVisible: boolean;
+    staticMenuMobileActive: boolean;
+    menuHoverActive: boolean;
+    sidebarActive: boolean;
+    anchored: boolean;
+}
+export declare class LayoutService {
+    _config: AppConfig;
+    config: import("@angular/core").WritableSignal<AppConfig>;
+    state: LayoutState;
+    private configUpdate;
+    private overlayOpen;
+    configUpdate$: import("rxjs").Observable<AppConfig>;
+    overlayOpen$: import("rxjs").Observable<any>;
+    constructor();
+    updateStyle(config: AppConfig): boolean;
+    onMenuToggle(): void;
+    onOverlaySubmenuOpen(): void;
+    showProfileSidebar(): void;
+    showConfigSidebar(): void;
+    isOverlay(): boolean;
+    isDesktop(): boolean;
+    isSlim(): boolean;
+    isSlimPlus(): boolean;
+    isHorizontal(): boolean;
+    isMobile(): boolean;
+    onConfigUpdate(): void;
+    changeTheme(): void;
+    replaceThemeLink(href: string): void;
+    changeScale(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
+}
+export {};

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

@@ -0,0 +1,178 @@
+import { Injectable, effect, signal } from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+export type MenuMode = 'static' | 'overlay' | 'horizontal' | 'slim' | 'slim-plus' | 'reveal' | 'drawer';
+
+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 {
+	staticMenuDesktopInactive: boolean;
+	overlayMenuActive: boolean;
+	profileSidebarVisible: boolean;
+	configSidebarVisible: boolean;
+	staticMenuMobileActive: boolean;
+	menuHoverActive: boolean;
+	sidebarActive: boolean;
+	anchored: boolean;
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LayoutService {
+	_config: AppConfig = {
+		ripple: false,
+		inputStyle: 'filled',
+		menuMode: 'horizontal',
+		colorScheme: 'light',
+		theme: 'indigo',
+		scale: 12,
+		menuTheme: 'colorScheme'
+	};
+
+	// TODO: Set User Config
+	config = signal<AppConfig>(this._config);
+
+	state: LayoutState = {
+		staticMenuDesktopInactive: false,
+		overlayMenuActive: false,
+		profileSidebarVisible: false,
+		configSidebarVisible: false,
+		staticMenuMobileActive: false,
+		menuHoverActive: false,
+		sidebarActive: false,
+		anchored: false
+	};
+
+	private configUpdate = new Subject<AppConfig>();
+
+	private overlayOpen = new Subject<any>();
+
+	configUpdate$ = this.configUpdate.asObservable();
+
+	overlayOpen$ = this.overlayOpen.asObservable();
+
+	constructor() {
+		effect(() => {
+			const config = this.config();
+			if (this.updateStyle(config)) {
+				this.changeTheme();
+			}
+			this.changeScale(config.scale);
+			this.onConfigUpdate();
+		});
+	}
+
+	updateStyle(config: AppConfig) {
+		return config.theme !== this._config.theme || config.colorScheme !== this._config.colorScheme;
+	}
+
+	onMenuToggle() {
+		if (this.isOverlay()) {
+			this.state.overlayMenuActive = !this.state.overlayMenuActive;
+
+			if (this.state.overlayMenuActive) {
+				this.overlayOpen.next(null);
+			}
+		}
+
+		if (this.isDesktop()) {
+			this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
+		} else {
+			this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+
+			if (this.state.staticMenuMobileActive) {
+				this.overlayOpen.next(null);
+			}
+		}
+	}
+
+	onOverlaySubmenuOpen() {
+		this.overlayOpen.next(null);
+	}
+
+	showProfileSidebar() {
+		this.state.profileSidebarVisible = true;
+	}
+
+	showConfigSidebar() {
+		this.state.configSidebarVisible = true;
+	}
+
+	isOverlay() {
+		return this.config().menuMode === 'overlay';
+	}
+
+	isDesktop() {
+		return window.innerWidth > 991;
+	}
+
+	isSlim() {
+		return this.config().menuMode === 'slim';
+	}
+
+	isSlimPlus() {
+		return this.config().menuMode === 'slim-plus';
+	}
+
+	isHorizontal() {
+		return this.config().menuMode === 'horizontal';
+	}
+
+	isMobile() {
+		return !this.isDesktop();
+	}
+
+	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`;
+	}
+}

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

@@ -0,0 +1,14 @@
+import { MenuItem } from 'primeng/api';
+import { MenuChangeEvent } from './menuchangeevent';
+import * as i0 from "@angular/core";
+export declare class MenuService {
+    private menuSource;
+    private resetSource;
+    menuItems: import("@angular/core").WritableSignal<MenuItem[]>;
+    menuSource$: import("rxjs").Observable<MenuChangeEvent>;
+    resetSource$: import("rxjs").Observable<unknown>;
+    onMenuStateChange(event: MenuChangeEvent): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MenuService>;
+}

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

@@ -0,0 +1,27 @@
+import { Injectable, signal } from '@angular/core';
+
+import { Subject } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+import { MenuChangeEvent } from './menuchangeevent';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class MenuService {
+	private menuSource = new Subject<MenuChangeEvent>();
+	private resetSource = new Subject();
+
+	public menuItems = signal<MenuItem[]>([]);
+
+	menuSource$ = this.menuSource.asObservable();
+	resetSource$ = this.resetSource.asObservable();
+
+	onMenuStateChange(event: MenuChangeEvent) {
+		this.menuSource.next(event);
+	}
+
+	reset() {
+		this.resetSource.next(true);
+	}
+}

package/theme/layout/service/menuchangeevent.d.ts

@@ -0,0 +1,4 @@
+export interface MenuChangeEvent {
+    key: string;
+    routeEvent?: boolean;
+}

package/theme/layout/service/menuchangeevent.ts

@@ -0,0 +1,4 @@
+export interface MenuChangeEvent {
+	key: string;
+	routeEvent?: boolean;
+}

package/theme/styles/layout/_animation.scss

@@ -1,53 +1,53 @@
-@keyframes px-mask-in {
-    from {
-        background-color: transparent;
-    }
-
-    to {
-        background-color: var(--maskbg);
-    }
-}
-
-@keyframes px-scalein {
-    0% {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-}
-
-@keyframes px-fadein {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes px-fadeout {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.px-scalein {
-    animation: px-scalein .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.px-fadein {
-    animation: px-fadein .15s linear;
-}
-
-.px-fadeout {
-    animation: px-fadeout .15s linear;
-}
+@keyframes px-mask-in {
+	from {
+		background-color: transparent;
+	}
+
+	to {
+		background-color: var(--maskbg);
+	}
+}
+
+@keyframes px-scalein {
+	0% {
+		opacity: 0;
+		transform: scaleY(0.8);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scaleY(1);
+	}
+}
+
+@keyframes px-fadein {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes px-fadeout {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+.px-scalein {
+	animation: px-scalein 0.12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.px-fadein {
+	animation: px-fadein 0.15s linear;
+}
+
+.px-fadeout {
+	animation: px-fadeout 0.15s linear;
+}

package/theme/styles/layout/_breadcrumb.scss

@@ -1,21 +1,21 @@
-.layout-breadcrumb {
-    ol {
-        display: flex;
-        align-items: center;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        gap: 1rem;
-        flex-wrap: wrap;
-        color: var(--text-color-secondary);
-
-        li {
-            font-weight: 600;
-        }
-    }
-}
-
-.content-breadcrumb {
-    margin-bottom: 2rem;
-    padding: 0 .5rem;
-}
+.layout-breadcrumb {
+	ol {
+		display: flex;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		gap: 1rem;
+		flex-wrap: wrap;
+		color: var(--text-color-secondary);
+
+		li {
+			font-weight: 600;
+		}
+	}
+}
+
+.content-breadcrumb {
+	margin-bottom: 2rem;
+	padding: 0 0.5rem;
+}

package/theme/styles/layout/_config.scss

@@ -1,42 +1,42 @@
-.layout-config-button {
-    display: block;
-    position: fixed;
-    width: 3rem;
-    height: 3rem;
-    line-height: 3rem;
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-    text-align: center;
-    top: 50%;
-    right: 0;
-    margin-top: -1.5rem;
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    transition: background-color var(--transition-duration);
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 999;
-    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
-
-    i {
-        font-size: 2rem;
-        line-height: inherit;
-        transform: rotate(0deg);
-        transition: transform 1s;
-    }
-
-    &:hover {
-        background: var(--primary-400);
-    }
-}
-
-.layout-config-sidebar {
-    &.p-sidebar {
-        .p-sidebar-content {
-            padding-left: 2rem;
-            padding-right: 2rem;
-        }
-    }
-}
+.layout-config-button {
+	display: block;
+	position: fixed;
+	width: 3rem;
+	height: 3rem;
+	line-height: 3rem;
+	background: var(--primary-color);
+	color: var(--primary-color-text);
+	text-align: center;
+	top: 50%;
+	right: 0;
+	margin-top: -1.5rem;
+	border-top-left-radius: var(--border-radius);
+	border-bottom-left-radius: var(--border-radius);
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	transition: background-color var(--transition-duration);
+	overflow: hidden;
+	cursor: pointer;
+	z-index: 999;
+	box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
+
+	i {
+		font-size: 2rem;
+		line-height: inherit;
+		transform: rotate(0deg);
+		transition: transform 1s;
+	}
+
+	&:hover {
+		background: var(--primary-400);
+	}
+}
+
+.layout-config-sidebar {
+	&.p-sidebar {
+		.p-sidebar-content {
+			padding-left: 2rem;
+			padding-right: 2rem;
+		}
+	}
+}

package/theme/styles/layout/_content.scss

@@ -1,3 +1,3 @@
-.layout-content-wrapper {
-    padding: 2rem;
-}
+.layout-content-wrapper {
+	padding: 2rem;
+}

package/theme/styles/layout/_fonts.scss

@@ -1,36 +1,40 @@
-/* poppins-regular - latin */
-@font-face {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 400;
-    src: local(''),
-         url('../../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('../../fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* poppins-500 - latin */
-  @font-face {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 500;
-    src: local(''),
-         url('../../fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('../../fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* poppins-600 - latin */
-  @font-face {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 600;
-    src: local(''),
-         url('../../fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('../../fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  /* poppins-700 - latin */
-  @font-face {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    src: local(''),
-         url('../../fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('../../fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
+/* poppins-regular - latin */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 400;
+	src:
+		local(''),
+		url('../../fonts/poppins-v20-latin-regular.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-500 - latin */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 500;
+	src:
+		local(''),
+		url('../../fonts/poppins-v20-latin-500.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 600;
+	src:
+		local(''),
+		url('../../fonts/poppins-v20-latin-600.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 700;
+	src:
+		local(''),
+		url('../../fonts/poppins-v20-latin-700.woff2') format('woff2'),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

package/theme/styles/layout/_layout_dark.scss

@@ -1,5 +1,5 @@
-.layout-dark {
-    --sidebar-shadow: none;
-    --sidebar-border: 1px solid var(--surface-border);
-    --card-shadow: none;
-}
+.layout-dark {
+	--sidebar-shadow: none;
+	--sidebar-border: 1px solid var(--surface-border);
+	--card-shadow: none;
+}

package/theme/styles/layout/_layout_dim.scss

@@ -1,5 +1,5 @@
-.layout-dim {
-    --sidebar-shadow: none;
-    --sidebar-border: 1px solid var(--surface-border);
-    --card-shadow: none;
-}
+.layout-dim {
+	--sidebar-shadow: none;
+	--sidebar-border: 1px solid var(--surface-border);
+	--card-shadow: none;
+}