ng-sidebar-pro/index.d.ts

A complete and professional sidebar pro library for modern Angular applications

import * as _angular_core from '@angular/core';
import { OnInit, ElementRef, Renderer2, Type } from '@angular/core';
import { Observable } from 'rxjs';
import { Route } from '@angular/router';
import * as ng_sidebar_pro from 'ng-sidebar-pro';

interface NavigationItem {
    id?: string;
    label: string;
    icon?: string;
    route: string;
    subItems?: NavigationItem[];
    component?: any;
    loadChildren?: () => Promise<any>;
    redirectTo?: string;
    routeMatch?: 'full' | 'prefix';
    permissions?: string[];
    roles?: string[];
    canActivate?: any[];
    badge?: NavigationBadge;
    tooltip?: string;
    cssClass?: string;
    style?: {
        [key: string]: any;
    };
    disabled?: boolean;
    hidden?: boolean;
    external?: boolean;
    target?: '_blank' | '_self';
    order?: number;
    routeType?: 'direct' | 'lazy' | 'container';
    hasRootComponent?: boolean;
    rootComponent?: any;
    data?: NavigationItemData;
    resolve?: {
        [key: string]: any;
    };
    guards?: NavigationGuards;
}
interface NavigationBadge {
    text?: string;
    count?: number;
    color?: 'primary' | 'accent' | 'warn' | 'success' | 'info';
    position?: 'top-right' | 'bottom-right' | 'inline' | 'icon';
    pulse?: boolean;
}
interface NavigationItemData {
    breadcrumb?: string;
    title?: string;
    description?: string;
    metadata?: Record<string, any>;
}
interface NavigationGuards {
    canActivate?: any[];
    canLoad?: any[];
    canDeactivate?: any[];
}

interface NavigationConfig {
    theme?: NavigationTheme;
    layout?: NavigationLayout;
    items: NavigationItem[];
    settings?: NavigationSettings;
    customStyles?: NavigationStyles;
    defaultRoute?: string;
    rootComponent?: any;
    baseData?: any;
}
type NavigationTheme = 'modern-light' | 'modern-dark' | 'classic-light' | 'classic-dark' | 'minimal' | 'glassmorphism' | 'custom';
type NavigationLayout = 'sidebar' | 'top' | 'mobile-drawer' | 'mini-sidebar' | 'mega-menu';
interface NavigationSettings {
    collapsible?: boolean;
    collapsedWidth?: number;
    expandedWidth?: number;
    autoCollapse?: boolean;
    showTooltips?: boolean;
    animationDuration?: number;
    search?: NavigationSearchConfig;
    header?: NavigationHeaderConfig;
    footer?: NavigationFooterConfig;
}
interface NavigationSearchConfig {
    enabled?: boolean;
    placeholder?: string;
    showIcons?: boolean;
    fuzzySearch?: boolean;
    searchDelay?: number;
}
interface NavigationHeaderConfig {
    title?: string;
    logo?: string;
    showUserProfile?: boolean;
    userProfile?: NavigationUserProfile;
    actions?: NavigationHeaderAction[];
}
interface NavigationFooterConfig {
    text?: string;
    links?: NavigationFooterLink[];
    showVersion?: boolean;
    version?: string;
}
interface NavigationUserProfile {
    name?: string;
    email?: string;
    avatar?: string;
    role?: string;
    menu?: NavigationItem[];
}
interface NavigationHeaderAction {
    icon: string;
    label?: string;
    action: () => void;
    badge?: NavigationBadge;
}
interface NavigationFooterLink {
    label: string;
    url: string;
    external?: boolean;
}
interface NavigationStyles {
    colors?: NavigationColors;
    typography?: NavigationTypography;
    spacing?: NavigationSpacing;
    borders?: NavigationBorders;
    shadows?: NavigationShadows;
    animations?: NavigationAnimations;
}
interface NavigationColors {
    primary?: string;
    accent?: string;
    background?: string;
    surface?: string;
    text?: string;
    textSecondary?: string;
    border?: string;
    hover?: string;
    active?: string;
    disabled?: string;
}
interface NavigationTypography {
    fontFamily?: string;
    fontSize?: string;
    fontWeight?: string;
    lineHeight?: string;
}
interface NavigationSpacing {
    padding?: string;
    margin?: string;
    itemSpacing?: string;
    levelIndent?: string;
}
interface NavigationBorders {
    radius?: string;
    width?: string;
    style?: string;
}
interface NavigationShadows {
    small?: string;
    medium?: string;
    large?: string;
}
interface NavigationAnimations {
    duration?: string;
    easing?: string;
    expandCollapse?: string;
    hover?: string;
}

declare class NavigationService {
    private router;
    private configSubject;
    private collapsedSubject;
    private searchTermSubject;
    config: _angular_core.WritableSignal<NavigationConfig | null>;
    collapsed: _angular_core.WritableSignal<boolean>;
    searchTerm: _angular_core.WritableSignal<string>;
    filteredItems: _angular_core.Signal<NavigationItem[]>;
    currentRoute: _angular_core.WritableSignal<string>;
    breadcrumbs: _angular_core.Signal<NavigationItem[]>;
    constructor();
    setConfig(config: NavigationConfig): void;
    getConfig(): Observable<NavigationConfig | null>;
    setCollapsed(collapsed: boolean): void;
    toggleCollapsed(): void;
    getCollapsed(): Observable<boolean>;
    setSearchTerm(term: string): void;
    getSearchTerm(): Observable<string>;
    navigateToItem(item: NavigationItem): void;
    findItemById(id: string): NavigationItem | null;
    findItemByRoute(route: string): NavigationItem | null;
    isItemActive(item: NavigationItem): boolean;
    canAccessItem(item: NavigationItem): boolean;
    private filterItemsBySearch;
    private itemMatchesSearch;
    private findItemInList;
    private findItemByRouteInList;
    private generateBreadcrumbs;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
}

declare class NavigationThemeService {
    private document;
    currentTheme: _angular_core.WritableSignal<NavigationTheme>;
    customStyles: _angular_core.WritableSignal<NavigationStyles | null>;
    private themes;
    computedStyles: _angular_core.Signal<NavigationStyles>;
    setTheme(theme: NavigationTheme): void;
    setCustomStyles(styles: NavigationStyles): void;
    getThemeStyles(theme: NavigationTheme): NavigationStyles;
    private applyThemeToDocument;
    private mergeStyles;
    private kebabCase;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationThemeService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationThemeService>;
}

declare class NavigationRouteGeneratorService {
    /**
     * Generates Angular routes from navigation configuration
     */
    generateRoutes(config: NavigationConfig): Route[];
    /**
     * Converts a navigation item to an Angular route
     */
    private itemToRoute;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationRouteGeneratorService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationRouteGeneratorService>;
}

declare class NavigationComponent implements OnInit {
    config: _angular_core.InputSignal<NavigationConfig | undefined>;
    navigationService: NavigationService;
    themeService: NavigationThemeService;
    searchExpanded: boolean;
    visibleItems: _angular_core.Signal<ng_sidebar_pro.NavigationItem[]>;
    navigationClasses: _angular_core.Signal<string>;
    navigationStyles: _angular_core.Signal<any>;
    ngOnInit(): void;
    toggleCollapse(): void;
    toggleSearch(): void;
    onSearchChange(event: Event): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationComponent, "es-navigation", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NavigationItemComponent {
    item: _angular_core.InputSignal<NavigationItem>;
    collapsed: _angular_core.InputSignal<boolean>;
    level: _angular_core.InputSignal<number>;
    parentRoute: _angular_core.InputSignal<string | undefined>;
    allMenuItems: _angular_core.InputSignal<NavigationItem[]>;
    navigationService: NavigationService;
    expanded: _angular_core.WritableSignal<boolean>;
    isNavigable: _angular_core.Signal<boolean>;
    routerLink: _angular_core.Signal<string | null>;
    routerLinkOptions: _angular_core.Signal<{
        exact: boolean;
    }>;
    hasSubItems: _angular_core.Signal<boolean | undefined>;
    isContainerType: _angular_core.Signal<boolean>;
    hasExpandableSubItems: _angular_core.Signal<boolean | undefined>;
    shouldShowSubItems: _angular_core.Signal<boolean>;
    getParentRouteForSubItem: _angular_core.Signal<string>;
    hasBadge: _angular_core.Signal<string | boolean | undefined>;
    badgeText: _angular_core.Signal<string>;
    badgeColor: _angular_core.Signal<any>;
    badgePosition: _angular_core.Signal<"top-right" | "bottom-right" | "inline" | "icon">;
    badgeSize: _angular_core.Signal<"small" | "medium">;
    itemClasses: _angular_core.Signal<string>;
    itemStyles: _angular_core.Signal<any>;
    subItemsStyles: _angular_core.Signal<{
        borderLeft: string;
        marginLeft: string;
    }>;
    iconOpacity: _angular_core.Signal<number>;
    getTooltip: () => string;
    shouldShowTooltip: _angular_core.Signal<boolean>;
    toggleExpanded(event?: Event): void;
    onItemClick(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationItemComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationItemComponent, "es-navigation-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "parentRoute": { "alias": "parentRoute"; "required": false; "isSignal": true; }; "allMenuItems": { "alias": "allMenuItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NavigationHeaderComponent {
    config: _angular_core.InputSignal<NavigationHeaderConfig>;
    collapsed: _angular_core.InputSignal<boolean>;
    toggleCollapse: _angular_core.OutputEmitterRef<void>;
    onUserMenuClick(menuItem: any): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationHeaderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationHeaderComponent, "es-navigation-header", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "toggleCollapse": "toggleCollapse"; }, never, never, true, never>;
}

declare class NavigationFooterComponent {
    config: _angular_core.InputSignal<NavigationFooterConfig>;
    collapsed: _angular_core.InputSignal<boolean>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationFooterComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationFooterComponent, "es-navigation-footer", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NavigationTooltipDirective implements OnInit {
    private el;
    private renderer;
    ngSmartTooltip: _angular_core.InputSignal<string>;
    position: _angular_core.InputSignal<"top" | "bottom" | "left" | "right">;
    constructor(el: ElementRef, renderer: Renderer2);
    ngOnInit(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationTooltipDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NavigationTooltipDirective, "[esTooltip]", never, { "ngSmartTooltip": { "alias": "ngSmartTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NavigationRippleDirective {
    private el;
    private renderer;
    constructor(el: ElementRef, renderer: Renderer2);
    onClick(event: MouseEvent): void;
    private createRipple;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationRippleDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NavigationRippleDirective, "[esRipple]", never, {}, {}, never, never, true, never>;
}

interface MenuItemData {
    breadcrumb?: string;
    title?: string;
    description?: string;
    permissions?: string[];
    metadata?: Record<string, any>;
}
interface MenuItemList {
    id?: string;
    icon?: string;
    label?: string;
    route: string;
    subItems?: MenuItemList[];
    component?: Type<unknown>;
    data?: MenuItemData;
    loadChildren?: () => Promise<Route[]>;
    redirectTo?: string;
    routeMatch?: 'full' | 'prefix';
    canActivate?: any[];
    resolve?: Record<string, any>;
    hidden?: boolean;
    disabled?: boolean;
    order?: number;
    guards?: {
        canActivate?: any[];
        canLoad?: any[];
        canDeactivate?: any[];
    };
    hasRootComponent?: boolean;
    rootComponent?: Type<unknown>;
    routeType?: 'direct' | 'lazy' | 'container';
}

declare class RouteBuilderUtils {
    /**
     * Construye la ruta completa para navegación basada en la configuración
     */
    static buildNavigationRoute(item: MenuItemList, parentPath?: string): string;
    /**
     * Determina si un item es navegable (puede ser clickeado para navegar)
     */
    static isNavigableItem(item: MenuItemList): boolean;
    /**
     * Construye el routerLink apropiado para el template
     */
    static buildRouterLink(item: MenuItemList, parentRoute?: string): string | string[];
    /**
     * Obtiene la ruta completa desde la raíz
     */
    static getFullRoute(item: MenuItemList, menuItems: MenuItemList[]): string;
    /**
     * Encuentra el item padre de un subitem
     */
    static findParentItem(targetItem: MenuItemList, menuItems: MenuItemList[]): MenuItemList | null;
}

export { NavigationComponent, NavigationFooterComponent, NavigationHeaderComponent, NavigationItemComponent, NavigationRippleDirective, NavigationRouteGeneratorService, NavigationService, NavigationThemeService, NavigationTooltipDirective, RouteBuilderUtils };
export type { NavigationAnimations, NavigationBadge, NavigationBorders, NavigationColors, NavigationConfig, NavigationFooterConfig, NavigationFooterLink, NavigationGuards, NavigationHeaderAction, NavigationHeaderConfig, NavigationItem, NavigationItemData, NavigationLayout, NavigationSearchConfig, NavigationSettings, NavigationShadows, NavigationSpacing, NavigationStyles, NavigationTheme, NavigationTypography, NavigationUserProfile };