@flusys/ng-layout 1.1.0 → 1.2.0-rc.1

package/package.json

@@ -1,19 +1,17 @@
 {
   "name": "@flusys/ng-layout",
-  "version": "1.1.0",
+  "version": "1.2.0-rc.1",
   "description": "Layout components for FLUSYS Angular applications",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=21.0.0",
-    "@angular/core": ">=21.0.0",
-    "@angular/router": ">=21.0.0",
-    "@flusys/ng-core": ">=1.1.0",
-    "@flusys/ng-shared": ">=1.1.0",
-    "@primeuix/themes": ">=1.0.0",
-    "primeicons": ">=7.0.0",
-    "primeng": ">=21.0.0",
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
+    "@angular/router": ">=22.0.0",
+    "@flusys/ng-core": ">=1.2.0-rc.1",
+    "@flusys/ng-shared": ">=1.2.0-rc.1",
+    "@flusys/ng-ui": ">=1.2.0-rc.1",
     "tailwindcss": ">=4.0.0",
-    "tailwindcss-primeui": ">=0.6.0"
+    "rxjs": "^7.8.0"
   },
   "sideEffects": false,
   "module": "fesm2022/flusys-ng-layout.mjs",
@@ -27,6 +25,7 @@
       "default": "./fesm2022/flusys-ng-layout.mjs"
     }
   },
+  "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
   }

package/types/flusys-ng-layout.d.ts

@@ -1,14 +1,18 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken } from '@angular/core';
+import { Signal, InjectionToken, Type } from '@angular/core';
+import { PresetName, ApplyThemeOptions } from '@flusys/ng-ui';
+export { ApplyThemeOptions, applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
+import { LayoutConfig } from '@flusys/ng-core';
 import { ILogicNode, IconTypeEnum } from '@flusys/ng-shared';
 import * as _flusys_ng_layout from '@flusys/ng-layout';
-import * as _primeuix_themes_types from '@primeuix/themes/types';
 
 declare class AppFooter {
     private readonly layoutService;
     readonly appName: string;
+    readonly displayLogo: string;
+    readonly isLogoSvg: boolean;
     readonly authorName: string;
     readonly authorUrl: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFooter, never>;
@@ -17,8 +21,11 @@ declare class AppFooter {
 
 interface ILauncherApp {
     id: string;
-    name: string;
-    iconType: IconTypeEnum;
+    /** Display name (use nameKey for localization instead) */
+    name?: string;
+    /** Translation key for the name - preferred over name for localization */
+    nameKey?: string;
+    iconType?: IconTypeEnum;
     icon: string;
     url: string;
     /** Optional permission logic - if set, app only visible when logic passes */
@@ -46,7 +53,10 @@ interface IUserInfo {
 }
 interface IMenuItem {
     id?: string;
+    /** Display label (use labelKey for localization instead) */
     label?: string;
+    /** Translation key for the label - preferred over label for localization */
+    labelKey?: string;
     icon?: string;
     iconType?: number;
     routerLink?: string[];
@@ -64,28 +74,38 @@ interface ILayoutAuthState {
     loginUserData: Signal<IUserInfo | null>;
 }
 interface ILayoutAuthApi {
-    logOut(): Observable<any>;
+    logOut(): Observable<unknown>;
     navigateLogin(withUrl?: boolean): void;
-    switchCompany(companyId: string, branchId: string): Observable<any>;
+    switchCompany(companyId: string, branchId: string): Observable<unknown>;
     getUserCompanies(): Observable<ICompanyInfo[]>;
     getCompanyBranches(companyId: string): Observable<IBranchInfo[]>;
 }
 declare const LAYOUT_AUTH_STATE: InjectionToken<ILayoutAuthState>;
 declare const LAYOUT_AUTH_API: InjectionToken<ILayoutAuthApi>;
-
-interface LayoutConfig {
-    preset?: string;
-    primary?: string;
-    surface?: string | null;
-    darkTheme?: boolean;
-    menuMode?: 'static' | 'overlay';
+declare const LAYOUT_NOTIFICATION_BELL: InjectionToken<Type<unknown>>;
+declare const LAYOUT_LANGUAGE_SELECTOR: InjectionToken<Type<unknown>>;
+declare const LAYOUT_LANGUAGE_SELECTOR_PANEL: InjectionToken<Type<unknown>>;
+declare const LAYOUT_SEARCHBAR: InjectionToken<Type<unknown>>;
+declare const LAYOUT_IS_RTL: InjectionToken<Signal<boolean>>;
+interface ISearchSuggestion {
+    label: string;
+    icon?: string;
+    routerLink?: string[];
+    data?: unknown;
+}
+interface ISearchAdapter {
+    getSuggestions(query: string): Observable<ISearchSuggestion[]>;
+    onSearch?(query: string): void;
 }
+declare const LAYOUT_SEARCH_ADAPTER: InjectionToken<ISearchAdapter>;
+
 interface LayoutState {
     staticMenuDesktopInactive?: boolean;
     overlayMenuActive?: boolean;
     configSidebarVisible?: boolean;
     staticMenuMobileActive?: boolean;
     menuHoverActive?: boolean;
+    topbarMenuVisible?: boolean;
 }
 interface MenuChangeEvent {
     key: string;
@@ -103,7 +123,6 @@ interface CompanyProfile {
     slug: string;
     logoUrl?: string | null;
 }
-/** Layout configuration and state management service */
 declare class LayoutService {
     private readonly document;
     private readonly platformId;
@@ -112,6 +131,7 @@ declare class LayoutService {
     private readonly appConfig;
     private readonly DEFAULT_CONFIG;
     private readonly DEFAULT_STATE;
+    private readonly memorable;
     private readonly _layoutConfig;
     private readonly _layoutState;
     private readonly _transitionComplete;
@@ -123,32 +143,37 @@ declare class LayoutService {
     private readonly _rawMenu;
     private readonly _rawApps;
     private readonly permissionValidator;
+    private readonly destroyRef;
+    private readonly _windowWidth;
     readonly userProfile: _angular_core.Signal<UserProfile | null>;
     readonly companyProfile: _angular_core.Signal<CompanyProfile | null>;
     readonly appName: string;
+    readonly appLogo: string;
+    readonly isAppLogoSvg: boolean;
     readonly authorName: string;
     readonly authorUrl: string;
     readonly menu: _angular_core.Signal<IMenuItem[]>;
     readonly apps: _angular_core.Signal<ILauncherApp[]>;
     readonly hasApps: _angular_core.Signal<boolean>;
     readonly isSidebarActive: _angular_core.Signal<boolean | undefined>;
+    readonly isDesktop: _angular_core.Signal<boolean>;
+    readonly isMobile: _angular_core.Signal<boolean>;
     readonly isDarkTheme: _angular_core.Signal<boolean | undefined>;
-    readonly getPrimary: _angular_core.Signal<string | undefined>;
-    readonly getSurface: _angular_core.Signal<string | null | undefined>;
     readonly isOverlay: _angular_core.Signal<boolean>;
+    readonly isTopbar: _angular_core.Signal<boolean>;
     readonly userName: _angular_core.Signal<string>;
     readonly userEmail: _angular_core.Signal<string>;
     readonly userProfilePictureUrl: _angular_core.Signal<string | null>;
     readonly companyLogoUrl: _angular_core.Signal<string | null>;
     readonly isAuthenticated: _angular_core.Signal<boolean>;
     readonly companyName: _angular_core.Signal<string>;
-    private readonly configUpdate;
+    readonly displayLogo: _angular_core.Signal<string>;
+    readonly isDisplayLogoSvg: _angular_core.Signal<boolean>;
     private readonly overlayOpen;
     private readonly menuSource;
     private readonly resetSource;
     readonly menuSource$: rxjs.Observable<MenuChangeEvent>;
     readonly resetSource$: rxjs.Observable<boolean>;
-    readonly configUpdate$: rxjs.Observable<LayoutConfig>;
     readonly overlayOpen$: rxjs.Observable<void>;
     private initialized;
     constructor();
@@ -156,8 +181,6 @@ declare class LayoutService {
     private handleDarkModeTransition;
     private onTransitionEnd;
     onMenuToggle(): void;
-    isDesktop(): boolean;
-    isMobile(): boolean;
     onMenuStateChange(event: MenuChangeEvent): void;
     reset(): void;
     updateLayoutConfig(config: Partial<LayoutConfig>): void;
@@ -172,56 +195,14 @@ declare class LayoutService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutService>;
 }
 
-/**
- * Service for persisting layout configuration to localStorage.
- * Handles loading, saving, and validation of layout preferences with SSR-safe checks.
- *
- * @example
- * ```typescript
- * const persistence = inject(LayoutPersistenceService);
- *
- * // Load saved config
- * const config = persistence.load();
- *
- * // Save config
- * persistence.save({ darkTheme: true, preset: 'Aura' });
- *
- * // Clear saved config
- * persistence.clear();
- * ```
- */
 declare class LayoutPersistenceService {
     private readonly platformId;
     private readonly isBrowser;
     private readonly validPresets;
     private readonly validMenuModes;
-    /**
-     * Load configuration from localStorage.
-     * Returns null if no saved config or invalid data.
-     * SSR-safe (returns null on server).
-     *
-     * @returns Validated layout configuration or null
-     */
     load(): LayoutConfig | null;
-    /**
-     * Save configuration to localStorage.
-     * SSR-safe (no-op on server).
-     *
-     * @param config Layout configuration to save
-     */
     save(config: LayoutConfig): void;
-    /**
-     * Clear stored configuration.
-     * SSR-safe (no-op on server).
-     */
     clear(): void;
-    /**
-     * Validate and sanitize configuration.
-     * Returns null if version mismatch.
-     *
-     * @param config Configuration to validate
-     * @returns Validated configuration or null
-     */
     private validateConfig;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutPersistenceService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutPersistenceService>;
@@ -246,78 +227,35 @@ declare type SurfacesType = {
 };
 declare class AppConfigurator {
     private readonly router;
+    private readonly translateAdapter;
+    private readonly platformId;
     readonly layoutService: LayoutService;
-    readonly presets: string[];
+    readonly presets: PresetName[];
     readonly showMenuModeButton: _angular_core.WritableSignal<boolean>;
-    readonly menuModeOptions: {
+    readonly menuModeOptions: _angular_core.Signal<{
         label: string;
-        value: string;
-    }[];
+        value: "static" | "overlay" | "topbar";
+    }[]>;
     constructor();
     readonly surfaces: SurfacesType[];
     readonly selectedPrimaryColor: _angular_core.Signal<string | undefined>;
     readonly selectedSurfaceColor: _angular_core.Signal<string | null | undefined>;
+    isSurfaceSelected(surfaceName: string | undefined): boolean;
     readonly selectedPreset: _angular_core.Signal<string | undefined>;
-    readonly menuMode: _angular_core.Signal<"static" | "overlay" | undefined>;
+    readonly menuMode: _angular_core.Signal<"static" | "overlay" | "topbar" | undefined>;
     readonly primaryColors: _angular_core.Signal<SurfacesType[]>;
-    getPresetExt(): {
-        semantic: {
-            primary: {
-                0?: string;
-                50?: string;
-                100?: string;
-                200?: string;
-                300?: string;
-                400?: string;
-                500?: string;
-                600?: string;
-                700?: string;
-                800?: string;
-                900?: string;
-                950?: string;
-            } | undefined;
-            colorScheme: {
-                light: {
-                    primary: {
-                        color: string;
-                        contrastColor: string;
-                        hoverColor: string;
-                        activeColor: string;
-                    };
-                    highlight: {
-                        background: string;
-                        focusBackground: string;
-                        color: string;
-                        focusColor: string;
-                    };
-                };
-                dark: {
-                    primary: {
-                        color: string;
-                        contrastColor: string;
-                        hoverColor: string;
-                        activeColor: string;
-                    };
-                    highlight: {
-                        background: string;
-                        focusBackground: string;
-                        color: string;
-                        focusColor: string;
-                    };
-                };
-            };
-        };
-    };
     updateColors(event: MouseEvent, type: string, color: SurfacesType): void;
-    applyTheme(type: string, color: SurfacesType): void;
+    private _applyColorChange;
     onPresetChange(event: string): void;
-    onMenuModeChange(event: 'static' | 'overlay'): void;
+    onMenuModeChange(event: 'static' | 'overlay' | 'topbar'): void;
+    private translate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppConfigurator, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppConfigurator, "app-configurator", never, {}, {}, never, never, true, never>;
 }
 
 declare class AppFloatingConfigurator {
     private readonly layoutService;
+    readonly languageSelectorPanel: _angular_core.Type<unknown> | null;
     readonly isDarkTheme: _angular_core.Signal<boolean | undefined>;
     toggleDarkMode(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFloatingConfigurator, never>;
@@ -336,13 +274,13 @@ declare class AppLayout {
     hideMenu(): void;
     blockBodyScroll(): void;
     unblockBodyScroll(): void;
-    readonly containerClass: _angular_core.Signal<{
-        'layout-overlay': boolean;
-        'layout-static': boolean;
-        'layout-static-inactive': boolean | undefined;
-        'layout-overlay-active': boolean | undefined;
-        'layout-mobile-active': boolean | undefined;
-    }>;
+    readonly isOverlay: _angular_core.Signal<boolean>;
+    readonly isStatic: _angular_core.Signal<boolean>;
+    readonly isTopbarMode: _angular_core.Signal<boolean>;
+    readonly isStaticInactive: _angular_core.Signal<boolean | undefined>;
+    readonly isOverlayActive: _angular_core.Signal<boolean | undefined>;
+    readonly isMobileActive: _angular_core.Signal<boolean | undefined>;
+    readonly isTopbarNavHidden: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLayout, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLayout, "app-layout", never, {}, {}, never, never, true, never>;
 }
@@ -391,8 +329,9 @@ declare class AppMenuitem {
     readonly index: _angular_core.InputSignal<number>;
     readonly parentKey: _angular_core.InputSignal<string>;
     private readonly router;
-    private readonly layoutService;
+    readonly layoutService: LayoutService;
     private readonly destroyRef;
+    private readonly parentLink;
     private readonly _active;
     readonly active: _angular_core.Signal<boolean>;
     readonly key: _angular_core.Signal<string>;
@@ -404,6 +343,8 @@ declare class AppMenuitem {
         readonly fragment: "ignored";
     }>;
     constructor();
+    onMouseEnter(): void;
+    private updateSubmenuPosition;
     private updateActiveStateFromRoute;
     itemClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppMenuitem, never>;
@@ -421,14 +362,21 @@ declare class AppTopbar {
     private readonly document;
     private readonly destroyRef;
     readonly layoutService: LayoutService;
+    readonly notificationBellComponent: _angular_core.Type<unknown> | null;
+    readonly languageSelectorComponent: _angular_core.Type<unknown> | null;
+    private readonly searchAdapter;
+    readonly hasSearchAdapter: _angular_core.Signal<boolean>;
     private readonly configContainer;
+    private readonly navContainer;
     readonly activePanel: _angular_core.WritableSignal<ActivePanel>;
     constructor();
     readonly companyName: _angular_core.Signal<string>;
-    readonly enableCompanyFeature: _angular_core.Signal<boolean>;
+    readonly displayLogo: _angular_core.Signal<string>;
+    readonly enableCompanyFeature: boolean;
     toggleDarkMode(): void;
     togglePanel(panel: ActivePanel): void;
     private handleOutsideClick;
+    private recalculateHoveredSubmenu;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppTopbar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppTopbar, "app-topbar", never, {}, {}, never, never, true, never>;
 }
@@ -439,6 +387,7 @@ declare class AppCompanyBranchSelector {
     private readonly authState;
     private readonly authApi;
     private readonly messageService;
+    private readonly translateAdapter;
     private readonly document;
     private readonly elementRef;
     private readonly _isActive;
@@ -467,19 +416,20 @@ declare class AppCompanyBranchSelector {
     onBranchChange(branchId: string | null): void;
     private loadBranches;
     onSwitch(): void;
+    private translate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppCompanyBranchSelector, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppCompanyBranchSelector, "app-company-branch-selector", never, {}, {}, never, never, true, never>;
 }
 
 declare class AppLauncher {
+    readonly layoutService: LayoutService;
     private readonly destroyRef;
     private readonly document;
     private readonly elementRef;
-    readonly layoutService: LayoutService;
     private readonly _isActive;
     readonly isActive: _angular_core.Signal<boolean>;
     constructor();
-    togglePanel(): void;
+    toggleActive(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLauncher, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLauncher, "app-launcher", never, {}, {}, never, never, true, never>;
 }
@@ -490,6 +440,8 @@ declare class AppProfile {
     private readonly authApi;
     private readonly layoutService;
     private readonly messageService;
+    private readonly translateAdapter;
+    private readonly appConfig;
     private readonly document;
     private readonly elementRef;
     private readonly _isActive;
@@ -499,12 +451,42 @@ declare class AppProfile {
     readonly userName: _angular_core.Signal<string>;
     readonly userEmail: _angular_core.Signal<string>;
     readonly profilePicture: _angular_core.Signal<string>;
+    readonly signUpEnabled: _angular_core.Signal<boolean>;
     logout(): void;
     copySignUpLink(): void;
+    private translate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppProfile, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppProfile, "app-profile", never, {}, {}, never, never, true, never>;
 }
 
+declare class AppSearchbar {
+    readonly layoutService: LayoutService;
+    private readonly router;
+    private readonly searchAdapter;
+    private readonly destroyRef;
+    private readonly document;
+    readonly searchTerm: _angular_core.WritableSignal<string>;
+    readonly suggestionsOpen: _angular_core.WritableSignal<boolean>;
+    readonly suggestions: _angular_core.WritableSignal<ISearchSuggestion[]>;
+    readonly focusedIndex: _angular_core.WritableSignal<number>;
+    readonly isSearchExpanded: _angular_core.WritableSignal<boolean>;
+    readonly isResponsive: _angular_core.WritableSignal<boolean>;
+    private readonly searchWrapper;
+    private readonly searchInput;
+    private searchTimeout?;
+    constructor();
+    onFocus(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleEnter(): void;
+    selectSuggestion(item: ISearchSuggestion): void;
+    private closeSuggestions;
+    toggleSearch(): void;
+    private closeSearch;
+    onSearch(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppSearchbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSearchbar, "app-searchbar", never, {}, {}, never, never, true, never>;
+}
+
 /** Filter launcher apps based on user permission codes */
 declare function filterAppsByPermissions(apps: ILauncherApp[], permissionCodes: string[]): ILauncherApp[];
 
@@ -526,9 +508,13 @@ declare function filterAppsByPermissions(apps: ILauncherApp[], permissionCodes:
  */
 declare function filterMenuByPermissions(items: IMenuItem[], permissionCode: string[]): IMenuItem[];
 
-declare const NavyBlueTheme: _primeuix_themes_types.Preset;
+declare function buildPreset(presetName: string, primary: string): ApplyThemeOptions;
+
+declare const NavyBlueTheme: ApplyThemeOptions;
+
+declare const GreenTheme: ApplyThemeOptions;
 
-declare const GreenTheme: _primeuix_themes_types.Preset;
+declare const LAYOUT_MESSAGES: Record<string, string>;
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
-export type { CompanyProfile, DocumentWithViewTransition, IBranchInfo, ICompanyInfo, ILauncherApp, ILayoutAuthApi, ILayoutAuthState, IMenuItem, IUserInfo, LayoutConfig, LayoutState, MenuChangeEvent, UserProfile, ViewTransition };
+export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
+export type { CompanyProfile, DocumentWithViewTransition, IBranchInfo, ICompanyInfo, ILauncherApp, ILayoutAuthApi, ILayoutAuthState, IMenuItem, ISearchAdapter, ISearchSuggestion, IUserInfo, LayoutState, MenuChangeEvent, UserProfile, ViewTransition };