@flusys/ng-layout 0.1.0-alpha.1

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

@@ -0,0 +1,525 @@
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { PrimeNG } from 'primeng/config';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { IconTypeEnum, ILogicNode, PlatformService } from '@flusys/ng-shared';
+import * as _flusys_ng_layout from '@flusys/ng-layout';
+import * as _primeuix_themes_types from '@primeuix/themes/types';
+
+interface ILauncherApp {
+    id: string;
+    name: string;
+    iconType: IconTypeEnum;
+    icon: string;
+    url: string;
+    /** Optional permission logic - if set, app only visible when logic passes */
+    permissionLogic?: ILogicNode | null;
+}
+interface ICompanyInfo {
+    id: string;
+    name: string;
+    slug: string;
+    imageId: string;
+}
+interface IBranchInfo {
+    id: string;
+    name: string;
+    slug: string;
+    imageId?: string;
+}
+interface IUserInfo {
+    id: string;
+    name: string;
+    email: string;
+    profilePicture?: {
+        url: string;
+    } | null;
+}
+interface IMenuItem {
+    id?: string;
+    label?: string;
+    icon?: string;
+    iconType?: number;
+    routerLink?: string[];
+    children?: IMenuItem[];
+    parent?: {
+        id: string;
+    } | null;
+    separator?: boolean;
+    /** Optional permission logic - if set, item only visible when logic passes */
+    permissionLogic?: ILogicNode | null;
+}
+interface ILayoutAuthState {
+    currentCompanyInfo: Signal<ICompanyInfo | null>;
+    currentBranchInfo: Signal<IBranchInfo | null>;
+    loginUserData: Signal<IUserInfo | null>;
+}
+interface ILayoutAuthApi {
+    logOut(): Observable<any>;
+    navigateLogin(withUrl?: boolean): void;
+    switchCompany(companyId: string, branchId: string): Observable<any>;
+    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';
+}
+interface LayoutState {
+    staticMenuDesktopInactive?: boolean;
+    overlayMenuActive?: boolean;
+    configSidebarVisible?: boolean;
+    staticMenuMobileActive?: boolean;
+    menuHoverActive?: boolean;
+}
+interface MenuChangeEvent {
+    key: string;
+    routeEvent?: boolean;
+}
+/**
+ * User profile information for display in layout
+ */
+interface UserProfile {
+    id: string;
+    name: string;
+    email: string;
+    profilePictureUrl?: string | null;
+}
+/**
+ * Company information for display in layout
+ */
+interface CompanyProfile {
+    id: string;
+    name: string;
+    slug: string;
+    logoUrl?: string | null;
+}
+/**
+ * Service managing layout configuration and state.
+ * Provides signals for reactive layout updates.
+ */
+declare class LayoutService {
+    private readonly document;
+    private readonly platformId;
+    private readonly isBrowser;
+    private readonly persistence;
+    private readonly defaultConfig;
+    private readonly initialConfig;
+    private readonly defaultState;
+    readonly layoutConfig: _angular_core.WritableSignal<LayoutConfig>;
+    readonly layoutState: _angular_core.WritableSignal<LayoutState>;
+    readonly transitionComplete: _angular_core.WritableSignal<boolean>;
+    readonly userProfile: _angular_core.WritableSignal<UserProfile | null>;
+    readonly companyProfile: _angular_core.WritableSignal<CompanyProfile | null>;
+    readonly appName: _angular_core.WritableSignal<string>;
+    private readonly _rawApps;
+    /**
+     * Filtered launcher apps based on user permissions.
+     * Automatically recomputes when raw apps or permissions change.
+     */
+    readonly apps: _angular_core.Signal<ILauncherApp[]>;
+    private readonly _rawMenu;
+    private readonly permissionValidator;
+    /**
+     * Filtered menu items based on user permissions.
+     * Automatically recomputes when raw menu or permission checker changes.
+     * Role checker is optional - if not set, role-based permissions will be denied.
+     */
+    readonly menu: _angular_core.Signal<IMenuItem[]>;
+    readonly theme: _angular_core.Signal<"light" | "dark">;
+    readonly isSidebarActive: _angular_core.Signal<boolean | undefined>;
+    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 userName: _angular_core.Signal<string>;
+    readonly userEmail: _angular_core.Signal<string>;
+    readonly userProfilePictureUrl: _angular_core.Signal<string | null>;
+    readonly companyName: _angular_core.Signal<string>;
+    readonly companyLogoUrl: _angular_core.Signal<string | null>;
+    readonly isAuthenticated: _angular_core.Signal<boolean>;
+    readonly hasApps: _angular_core.Signal<boolean>;
+    private readonly configUpdate;
+    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();
+    private handleDarkModeTransition;
+    private startViewTransition;
+    toggleDarkMode(config?: LayoutConfig): void;
+    private onTransitionEnd;
+    onMenuToggle(): void;
+    isDesktop(): boolean;
+    isMobile(): boolean;
+    onConfigUpdate(): void;
+    onMenuStateChange(event: MenuChangeEvent): void;
+    reset(): void;
+    /**
+     * Set the current user profile for display in layout.
+     * Called by auth integration to sync user data.
+     */
+    setUserProfile(profile: UserProfile | null): void;
+    /**
+     * Set the current company profile for display in layout.
+     * Called by auth integration to sync company data.
+     */
+    setCompanyProfile(profile: CompanyProfile | null): void;
+    /**
+     * Set the raw menu items (unfiltered).
+     * Menu will be automatically filtered based on permission checker.
+     * Called by app initialization to set menu from IAM or other source.
+     */
+    setMenu(items: IMenuItem[]): void;
+    /**
+     * Clear menu and permission/role checkers.
+     * Called on logout.
+     */
+    clearMenu(): void;
+    /**
+     * Set launcher apps for display in header.
+     * Apps will be automatically filtered based on user permissions.
+     * If empty after filtering, the app launcher button is hidden.
+     */
+    setApps(apps: ILauncherApp[]): void;
+    /**
+     * Clear launcher apps.
+     * Called on logout.
+     */
+    clearApps(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutService, never>;
+    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>;
+}
+
+declare type SurfacesType = {
+    name?: string;
+    palette?: {
+        0?: string;
+        50?: string;
+        100?: string;
+        200?: string;
+        300?: string;
+        400?: string;
+        500?: string;
+        600?: string;
+        700?: string;
+        800?: string;
+        900?: string;
+        950?: string;
+    };
+};
+declare class AppConfigurator {
+    router: Router;
+    config: PrimeNG;
+    layoutService: LayoutService;
+    platformService: PlatformService;
+    primeng: PrimeNG;
+    presets: string[];
+    showMenuModeButton: _angular_core.WritableSignal<boolean>;
+    menuModeOptions: {
+        label: string;
+        value: string;
+    }[];
+    ngOnInit(): void;
+    surfaces: SurfacesType[];
+    selectedPrimaryColor: _angular_core.Signal<string | undefined>;
+    selectedSurfaceColor: _angular_core.Signal<string | null | undefined>;
+    selectedPreset: _angular_core.Signal<string | undefined>;
+    menuMode: _angular_core.Signal<"static" | "overlay" | undefined>;
+    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: any, type: string, color: any): void;
+    applyTheme(type: string, color: any): void;
+    onPresetChange(event: any): void;
+    onMenuModeChange(event: 'static' | 'overlay'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppConfigurator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppConfigurator, "app-configurator", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppFloatingConfigurator {
+    LayoutService: LayoutService;
+    isDarkTheme: _angular_core.Signal<boolean | undefined>;
+    toggleDarkMode(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFloatingConfigurator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppFloatingConfigurator, "app-floating-configurator", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppFooter {
+    private authState;
+    companyName: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppFooter, "app-footer", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppTopbar {
+    private readonly authState;
+    private readonly appConfig;
+    readonly layoutService: LayoutService;
+    companyName: _angular_core.Signal<string>;
+    enableCompanyFeature: _angular_core.Signal<boolean>;
+    toggleDarkMode(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppTopbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppTopbar, "app-topbar", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppSidebar {
+    el: ElementRef;
+    constructor(el: ElementRef);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSidebar, "app-sidebar", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppLayout {
+    private readonly destroyRef;
+    private readonly document;
+    readonly layoutService: LayoutService;
+    private readonly renderer;
+    private readonly router;
+    private menuOutsideClickListener;
+    appSidebar: AppSidebar;
+    appTopBar: AppTopbar;
+    constructor();
+    isOutsideClicked(event: MouseEvent): boolean;
+    hideMenu(): void;
+    blockBodyScroll(): void;
+    unblockBodyScroll(): void;
+    get containerClass(): {
+        'layout-overlay': boolean;
+        'layout-static': boolean;
+        'layout-static-inactive': boolean | undefined;
+        'layout-overlay-active': boolean | undefined;
+        'layout-mobile-active': boolean | undefined;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLayout, "app-layout", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Main menu component that displays filtered menu items.
+ * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
+ * The filtering happens internally in LayoutService via computed signal.
+ */
+declare class AppMenu {
+    private readonly layoutService;
+    /**
+     * Filtered menu items from layout service.
+     * This signal is computed in LayoutService and automatically updates when:
+     * - Raw menu changes (setMenu called)
+     * - Permission state changes (user permissions updated)
+     */
+    readonly menuItems: _angular_core.Signal<_flusys_ng_layout.IMenuItem[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppMenu, "app-menu", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppMenuitem {
+    readonly item: _angular_core.InputSignal<IMenuItem>;
+    readonly index: _angular_core.InputSignal<number>;
+    readonly parentKey: _angular_core.InputSignal<string>;
+    private readonly router;
+    private readonly layoutService;
+    private readonly authState;
+    private readonly destroyRef;
+    readonly active: _angular_core.WritableSignal<boolean>;
+    readonly key: _angular_core.Signal<string>;
+    readonly routerLink: _angular_core.Signal<string[]>;
+    readonly routerLinkActiveOptions: _angular_core.Signal<{
+        readonly paths: "exact" | "subset";
+        readonly queryParams: "ignored";
+        readonly matrixParams: "ignored";
+        readonly fragment: "ignored";
+    }>;
+    constructor();
+    private updateActiveStateFromRoute;
+    itemClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppMenuitem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppMenuitem, "[app-menuitem]", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; "parentKey": { "alias": "parentKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Company/branch switcher displayed in top bar */
+declare class AppCompanyBranchSelector {
+    private readonly destroyRef;
+    private readonly authState;
+    private readonly authApi;
+    private readonly messageService;
+    readonly currentCompanyName: _angular_core.Signal<string>;
+    readonly currentBranchName: _angular_core.Signal<string | null>;
+    readonly companies: _angular_core.WritableSignal<ICompanyInfo[]>;
+    readonly branches: _angular_core.WritableSignal<IBranchInfo[]>;
+    readonly selectedCompanyId: _angular_core.WritableSignal<string | null>;
+    readonly selectedBranchId: _angular_core.WritableSignal<string | null>;
+    readonly isLoadingCompanies: _angular_core.WritableSignal<boolean>;
+    readonly isLoadingBranches: _angular_core.WritableSignal<boolean>;
+    readonly isSwitching: _angular_core.WritableSignal<boolean>;
+    readonly canSwitch: _angular_core.Signal<boolean>;
+    onPanelOpen(): void;
+    private loadCompanies;
+    onCompanyChange(companyId: string | null): void;
+    onBranchChange(branchId: string | null): void;
+    private loadBranches;
+    onSwitch(): void;
+    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;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppLauncher, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppLauncher, "app-launcher", never, {}, {}, never, never, true, never>;
+}
+
+declare class AppProfile {
+    private readonly destroyRef;
+    private readonly authState;
+    private readonly authApi;
+    private readonly messageService;
+    userName: _angular_core.Signal<string>;
+    userEmail: _angular_core.Signal<string>;
+    profilePicture: _angular_core.Signal<string>;
+    logout(): void;
+    copySignUpLink(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppProfile, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppProfile, "app-profile", never, {}, {}, never, never, true, never>;
+}
+
+/** Filter launcher apps based on user permission codes */
+declare function filterAppsByPermissions(apps: ILauncherApp[], permissionCodes: string[]): ILauncherApp[];
+
+/**
+ * Filter menu items based on permission and role checker
+ *
+ * @param items - Array of menu items to filter
+ * @param hasPermission - Function to check if user has permission
+ * @param hasRole - Function to check if user has role (optional, defaults to always false)
+ * @returns Filtered menu items array
+ *
+ * @example
+ * ```typescript
+ * const filteredMenu = filterMenuByPermissions(
+ *   menuItems,
+ *   (actionCode) => permissionState.hasAction(actionCode)
+ * );
+ * ```
+ */
+declare function filterMenuByPermissions(items: IMenuItem[], permissionCode: string[]): IMenuItem[];
+
+declare const GreenTheme: _primeuix_themes_types.Preset;
+
+declare const NavyBlueTheme: _primeuix_themes_types.Preset;
+
+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, IBranchInfo, ICompanyInfo, ILauncherApp, ILayoutAuthApi, ILayoutAuthState, IMenuItem, IUserInfo, LayoutConfig, LayoutState, MenuChangeEvent, UserProfile };