aril 0.0.13 → 0.0.14

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

@@ -341,3 +341,13 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 export class AppMenuComponent {
 	menuService = inject(MenuService);
 }
+@Component({
+	standalone: true,
+	selector: 'app-sub-menu',
+	imports: [AppMenuItemComponent],
+	templateUrl: './app.sub.menu.component.html'
+})
+export class AppSubMenuComponent {
+	menuService = inject(MenuService);
+	globalThis: any = globalThis;
+}

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

@@ -0,0 +1,9 @@
+<ul class="layout-menu">
+	@for (subItem of menuService.subMenuItems()[globalThis.activeMF]; track $index) {
+		@if (subItem.separator) {
+			<li class="menu-separator"></li>
+		} @else {
+			<li app-menuitem [item]="subItem" [index]="$index" [root]="true"></li>
+		}
+	}
+</ul>

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

@@ -4,9 +4,11 @@ import * as i0 from "@angular/core";
 export declare class AppSidebarComponent {
     layoutService: LayoutService;
     el: ElementRef;
+    constructor(layoutService: LayoutService, el: ElementRef);
     timeout: any;
+    globalThis: any;
     menuContainer: ElementRef;
-    constructor(layoutService: LayoutService, el: ElementRef);
+    subMenuContainer: ElementRef;
     onMouseEnter(): void;
     onMouseLeave(): void;
     anchor(): void;

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

@@ -43,3 +43,11 @@
 		<app-menu></app-menu>
 	</div>
 </div>
+
+@if (globalThis.isMFEMode && globalThis.activeMF) {
+	<div class="layout-sidebar" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+		<div #subMenuContainer class="layout-menu-container">
+			<app-sub-menu></app-sub-menu>
+		</div>
+	</div>
+}

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

@@ -2,23 +2,26 @@ import { RouterLink } from '@angular/router';
 import { Component, ElementRef, ViewChild } from '@angular/core';
 
 import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuComponent } from '../menu/app.menu.component';
+import { AppMenuComponent, AppSubMenuComponent } from '../menu/app.menu.component';
 
 @Component({
 	standalone: true,
 	selector: 'app-sidebar',
-	imports: [RouterLink, AppMenuComponent],
+	imports: [RouterLink, AppMenuComponent, AppSubMenuComponent],
 	templateUrl: './app.sidebar.component.html'
 })
 export class AppSidebarComponent {
-	timeout: any = null;
-
-	@ViewChild('menuContainer') menuContainer!: ElementRef;
 	constructor(
 		public layoutService: LayoutService,
 		public el: ElementRef
 	) {}
 
+	timeout: any = null;
+	globalThis: any = globalThis;
+
+	@ViewChild('menuContainer') menuContainer!: ElementRef;
+	@ViewChild('subMenuContainer') subMenuContainer!: ElementRef;
+
 	onMouseEnter() {
 		if (!this.layoutService.state.anchored) {
 			if (this.timeout) {

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

@@ -1,178 +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`;
-	}
-}
+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

@@ -1,10 +1,12 @@
 import { MenuItem } from 'primeng/api';
+import { Interfaces } from 'aril/util/lib';
 import { MenuChangeEvent } from './menuchangeevent';
 import * as i0 from "@angular/core";
 export declare class MenuService {
     private menuSource;
     private resetSource;
     menuItems: import("@angular/core").WritableSignal<MenuItem[]>;
+    subMenuItems: import("@angular/core").WritableSignal<Interfaces.MapStringArray<MenuItem>>;
     menuSource$: import("rxjs").Observable<MenuChangeEvent>;
     resetSource$: import("rxjs").Observable<unknown>;
     onMenuStateChange(event: MenuChangeEvent): void;

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

@@ -2,6 +2,7 @@ import { Injectable, signal } from '@angular/core';
 
 import { Subject } from 'rxjs';
 import { MenuItem } from 'primeng/api';
+import { Interfaces } from 'aril/util/lib';
 
 import { MenuChangeEvent } from './menuchangeevent';
 
@@ -13,6 +14,7 @@ export class MenuService {
 	private resetSource = new Subject();
 
 	public menuItems = signal<MenuItem[]>([]);
+	public subMenuItems = signal<Interfaces.MapStringArray<MenuItem>>({});
 
 	menuSource$ = this.menuSource.asObservable();
 	resetSource$ = this.resetSource.asObservable();

package/ui/button/src/button.component.d.ts

@@ -13,7 +13,7 @@ export declare class ButtonComponent {
     size: import("@angular/core").InputSignal<Size, Size>;
     icon: import("@angular/core").InputSignal<PrimeIcon | undefined, PrimeIcon | undefined>;
     color: import("@angular/core").InputSignal<Colors, Colors>;
-    clickEvent: EventEmitter<never>;
+    clickEvent: EventEmitter<Event>;
     _icon: import("@angular/core").Signal<string>;
     _color: import("@angular/core").Signal<string>;
     _styleClass: import("@angular/core").Signal<string>;

package/ui/mask/src/mask.component.d.ts

@@ -11,7 +11,7 @@ import * as i1 from "aril/ui/lib";
 export declare class MaskComponent extends BaseInputComponent {
     mask: import("@angular/core").InputSignal<string, string>;
     slotChar: import("@angular/core").InputSignal<string, string>;
-    placeholder: import("@angular/core").InputSignal<string | undefined, string | undefined>;
+    placeholder: import("@angular/core").InputSignal<string, string>;
     maxlength: import("@angular/core").InputSignal<number, number>;
     usageInGrid: import("@angular/core").InputSignal<boolean, boolean>;
     tabindex: import("@angular/core").InputSignal<number | undefined, number | undefined>;

package/ui/number/src/number.component.d.ts

@@ -6,7 +6,7 @@ export declare class NumberComponent extends BaseInputComponent {
     min: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     max: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     showButtons: import("@angular/core").InputSignal<boolean, boolean>;
-    placeholder: import("@angular/core").InputSignal<string | undefined, string | undefined>;
+    placeholder: import("@angular/core").InputSignal<string, string>;
     prefix: import("@angular/core").InputSignal<string | undefined, string | undefined>;
     suffix: import("@angular/core").InputSignal<string | undefined, string | undefined>;
     maxlength: import("@angular/core").InputSignal<any, any>;

package/ui/password/src/password.component.d.ts

@@ -4,7 +4,7 @@ import * as i1 from "aril/ui/lib";
 export declare class PasswordComponent extends BaseInputComponent {
     feedback: import("@angular/core").InputSignal<boolean, boolean>;
     passwordCriterias: import("@angular/core").InputSignal<string[] | undefined, string[] | undefined>;
-    placeholder: import("@angular/core").InputSignal<string | undefined, string | undefined>;
+    placeholder: import("@angular/core").InputSignal<string, string>;
     tabindex: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PasswordComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PasswordComponent, "aril-password[ngModel], aril-password[formControl], aril-password[formControlName]", never, { "feedback": { "alias": "feedback"; "required": false; "isSignal": true; }; "passwordCriterias": { "alias": "passwordCriterias"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.ValueAccessorDirective; inputs: {}; outputs: {}; }]>;

package/ui/text/src/text.component.d.ts

@@ -3,14 +3,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "aril/ui/lib";
 type Size = 'sm' | 'md' | 'lg';
 export declare class TextComponent extends BaseInputComponent {
-    placeholder: import("@angular/core").InputSignal<string | undefined, string | undefined>;
+    placeholder: import("@angular/core").InputSignal<string, string>;
     tabindex: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     icon: import("@angular/core").InputSignal<PrimeIcon | undefined, PrimeIcon | undefined>;
     iconPos: import("@angular/core").InputSignal<IconPosTypes, IconPosTypes>;
     size: import("@angular/core").InputSignal<Size, Size>;
     _icon: import("@angular/core").Signal<string>;
     _iconPosClass: import("@angular/core").Signal<string>;
-    _sizeClass: import("@angular/core").Signal<"p-inputtext-sm" | "" | "p-inputtext-lg">;
+    _sizeClass: import("@angular/core").Signal<"" | "p-inputtext-sm" | "p-inputtext-lg">;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "aril-text[ngModel], aril-text[formControl], aril-text[formControlName]", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPos": { "alias": "iconPos"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.ValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }

package/ui/tree/src/tree.component.d.ts

@@ -10,10 +10,7 @@ export declare class TreeComponent {
     selectionMode: import("@angular/core").InputSignal<SelectionModes | undefined, SelectionModes | undefined>;
     expandEvent: EventEmitter<unknown>;
     selectionEvent: EventEmitter<any>;
-    isExpended: boolean;
     selectedNodes: TreeNode | TreeNode[] | null;
-    toggleTree(): void;
-    expandRecursive(node: TreeNode[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TreeComponent, "aril-tree", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; }, { "expandEvent": "expandEvent"; "selectionEvent": "selectionEvent"; }, never, never, true, never>;
 }

package/util/lib/src/interfaces.d.ts

@@ -29,6 +29,9 @@ export declare namespace Interfaces {
     interface MapNumberArray<T> {
         [key: number]: Array<T>;
     }
+    interface MapStringArray<T> {
+        [key: string]: Array<T>;
+    }
     interface MapNumberAny {
         [key: number]: any;
     }