@fsegurai/ngx-sidenav/index.d.ts

Angular component for creating a resizeable sidenav with drag and drop functionality.

import * as _angular_core from '@angular/core';
import { InputSignal, ViewContainerRef, OnInit, Type, Signal } from '@angular/core';
import * as _fsegurai_ngx_sidenav from '@fsegurai/ngx-sidenav';

declare class LinkItem {
    routerLink: InputSignal<string | string[] | null>;
    routerLinkActiveOptions: InputSignal<{
        exact: boolean;
    }>;
    isTitle: InputSignal<boolean>;
    isParent: InputSignal<boolean>;
    isDisabled: InputSignal<boolean>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkItem, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkItem, "ngx-sidenav-link-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "isTitle": { "alias": "isTitle"; "required": false; "isSignal": true; }; "isParent": { "alias": "isParent"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

declare class ContentAreaDirective {
    _viewContainerRef: ViewContainerRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentAreaDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ContentAreaDirective, "[ngxSidenavContentArea]", never, {}, {}, never, never, true, never>;
}

declare class Sidenav implements OnInit {
    #private;
    private readonly _sidenav;
    readonly collapseWidth: _angular_core.InputSignal<number>;
    readonly minWidth: _angular_core.InputSignal<number>;
    readonly maxWidth: _angular_core.InputSignal<number>;
    readonly initialWidth: _angular_core.InputSignal<number>;
    readonly clearCacheOnReload: _angular_core.InputSignal<boolean>;
    readonly position: _angular_core.InputSignal<"left" | "right">;
    readonly direction: _angular_core.InputSignal<"ltr" | "rtl">;
    readonly backdrop: _angular_core.InputSignal<boolean>;
    readonly canCollapse: _angular_core.InputSignal<boolean>;
    readonly canResize: _angular_core.InputSignal<boolean>;
    readonly menuIconCollapse: _angular_core.InputSignal<string>;
    readonly menuIconExpand: _angular_core.InputSignal<string>;
    readonly opened: _angular_core.OutputEmitterRef<void>;
    readonly closed: _angular_core.OutputEmitterRef<void>;
    readonly resized: _angular_core.OutputEmitterRef<number>;
    readonly sidenavContentArea: _angular_core.Signal<ContentAreaDirective | undefined>;
    protected readonly currentMenu: _angular_core.Signal<_fsegurai_ngx_sidenav.MenuStackItem | undefined>;
    protected resizingEvent: {
        isResizing: boolean;
        startingCursorX: number;
        startingWidth: number;
    };
    ngOnInit(): void;
    /**
     * Getter method to determine if resizing is in progress.
     *
     * @return {boolean} Returns true if a resizing event is currently active, false otherwise.
     */
    get isResizing(): boolean;
    /**
     * Determines if the element is in an expanded state by invoking the `expanded` method.
     *
     * @return {boolean} Returns true if the element is expanded, otherwise false.
     */
    get isExpanded(): boolean;
    /**
     * Retrieves the dynamic width of the host element based on the sidenav service
     * and the component's expanded or collapsed state.
     *
     * @return {string} The calculated width of the host element as a string, e.g., "250 px" or a CSS variable value.
     */
    get hostWidth(): string;
    /**
     * Determines if the sidenav is positioned to the right.
     *
     * @return {boolean} Returns true if the sidenav's position is 'right', false otherwise.
     */
    get isRight(): boolean;
    /**
     * Updates the width of the sidenav during a resize operation based on mouse movement.
     *
     * @param {MouseEvent} event The mouse event containing the current position of the cursor.
     * @return {void}
     */
    updateSidenavWidth(event: MouseEvent): void;
    /**
     * Stops the resizing action and resets the cursor style when the mouse button is released.
     *
     * @return {void} Does not return a value.
     */
    stopResizing(): void;
    /**
     * Handles the keydown events for specific elements and performs actions such as resizing a sidebar or toggling navigation.
     *
     * @param {KeyboardEvent} event The keyboard event triggered by the user.
     * @return {void} Does not return a value.
     */
    handleKeydown(event: KeyboardEvent): void;
    /**
     * Checks the sliding orientation of the side navigation.
     *
     * @param {'left' | 'right'} sideNav - Specifies the side navigation position (left or right).
     * @return {boolean} Returns true if the sliding orientation matches the specified side navigation position, otherwise false.
     */
    protected checkSlideOrientation(sideNav: 'left' | 'right'): boolean;
    /**
     * Toggles the state of the navigation menu by opening it if it is closed or closing it if it is open.
     * Emits an event to indicate whether the navigation menu has been opened or closed.
     *
     * @return {void} This method does not return a value.
     */
    protected toggleNav(): void;
    /**
     * Initializes the resizing process for the sidenav component when it is in an expanded state.
     *
     * @param {MouseEvent | TouchEvent} event - The event triggered to start resizing, can be a mouse or touch event.
     * @return {void} This method does not return a value.
     */
    protected startResizing(event: MouseEvent | TouchEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sidenav, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidenav, "ngx-sidenav", never, { "collapseWidth": { "alias": "collapseWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "initialWidth": { "alias": "initialWidth"; "required": false; "isSignal": true; }; "clearCacheOnReload": { "alias": "clearCacheOnReload"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "canCollapse": { "alias": "canCollapse"; "required": false; "isSignal": true; }; "canResize": { "alias": "canResize"; "required": false; "isSignal": true; }; "menuIconCollapse": { "alias": "menuIconCollapse"; "required": false; "isSignal": true; }; "menuIconExpand": { "alias": "menuIconExpand"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "resized": "resized"; }, never, never, true, never>;
}

interface StackMenuItem {
    label: string;
    tags?: string[];
    summary?: string;
    icon?: string;
    iconType?: 'material' | 'svg' | 'custom';
    route?: string;
    children?: StackMenuItem[];
    isParent?: boolean;
    isTitle?: boolean;
    tooltip?: string;
    badge?: string | number;
    badgeColor?: string;
    disabled?: boolean;
    [key: string]: unknown;
}

declare class SidenavMenu {
    private readonly _sidenav;
    items: _angular_core.InputSignal<StackMenuItem[]>;
    parentLabel: _angular_core.InputSignal<string | undefined>;
    parentBadge: _angular_core.InputSignal<string | number | undefined>;
    parentBadgeColor: _angular_core.InputSignal<string | undefined>;
    protected readonly canGoBack: _angular_core.Signal<boolean>;
    protected readonly currentMenu: _angular_core.Signal<_fsegurai_ngx_sidenav.MenuStackItem | undefined>;
    protected onBack(): void;
    protected onMenuItemClick(item: StackMenuItem): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavMenu, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavMenu, "ngx-sidenav-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "parentLabel": { "alias": "parentLabel"; "required": false; "isSignal": true; }; "parentBadge": { "alias": "parentBadge"; "required": false; "isSignal": true; }; "parentBadgeColor": { "alias": "parentBadgeColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

interface BaseStackItem {
    readonly type: string;
    readonly id?: string;
    readonly timestamp?: number;
}
interface MenuStackItem extends BaseStackItem {
    readonly type: 'menu';
    readonly items: StackMenuItem[];
    readonly title?: string;
    readonly badge?: string | number;
    readonly badgeColor?: string;
}
interface ComponentStackItem extends BaseStackItem {
    readonly type: 'component';
    readonly component: Type<unknown>;
    readonly componentData?: Record<string, unknown>;
}
interface SerializableStackItem {
    readonly type: 'menu';
    readonly title?: string;
    readonly badge?: string | number;
    readonly badgeColor?: string;
    readonly items: StackMenuItem[];
    readonly id?: string;
    readonly timestamp?: number;
}

/**
 * Represents an item in the side navigation stack.
 *
 * A `SidenavStackItem` can either be a `MenuStackItem` or a `ComponentStackItem`.
 * It is used to define the structure and hierarchy of items in the side navigation panel.
 */
type SidenavStackItem = MenuStackItem | ComponentStackItem;
/**
 * Determines if the given item is a MenuStackItem.
 *
 * @param {SidenavStackItem} item - The item to check.
 * @return {boolean} True if the item is a MenuStackItem, otherwise false.
 */
declare function isMenuStackItem(item: SidenavStackItem): item is MenuStackItem;
/**
 * Determines if the given stack item is a ComponentStackItem.
 *
 * @param {SidenavStackItem} item - The stack item to evaluate.
 * @return {boolean} - Returns true if the item is of type ComponentStackItem, otherwise false.
 */
declare function isComponentStackItem(item: SidenavStackItem): item is ComponentStackItem;

declare class SidenavService {
    #private;
    readonly COLLAPSE_WIDTH = 30;
    readonly INITIAL_WIDTH = 300;
    minWidth: Signal<number>;
    maxWidth: Signal<number>;
    isExpanded: Signal<boolean>;
    sidenavWidth: Signal<number>;
    readonly currentMenu: Signal<MenuStackItem | undefined>;
    readonly canGoBack: Signal<boolean>;
    isSlidingInFromRight: boolean;
    isSlidingInFromLeft: boolean;
    constructor();
    /**
     * Marks the application or specific data to be cleared on the next reload
     * by setting a flag in the local storage.
     *
     * @return {void} This method does not return a value.
     */
    clearOnNextReload(): void;
    /**
     * Configures the parameters for the sidenav, including minimum width, maximum width,
     * and initial width. Updates the sidenav properties and optionally stores the
     * initial width in local storage.
     *
     * @param {Object} config - Configuration object for the sidenav.
     * @param {number} [config.minWidth] - Specifies the minimum width of the sidenav.
     * @param {number} [config.maxWidth] - Specifies the maximum width of the sidenav.
     * @param {number} [config.initialWidth] - Specifies the initial width of the sidenav.
     * @return {void}
     */
    setConfig({ minWidth, maxWidth, initialWidth }: {
        minWidth?: number;
        maxWidth?: number;
        initialWidth?: number;
    }): void;
    /**
     * Adjusts the width of the sidenav, constraining it within the defined minimum and maximum bounds.
     * The adjusted width is stored both in a state variable and in local storage.
     *
     * @param {number} width - The desired width of the sidenav to be set.
     * @return {void} This method does not return a value.
     */
    setSidenavWidth(width: number): void;
    /**
     * Toggles the state of the sidenav between expanded and collapsed.
     * Updates the local storage to reflect the new state.
     *
     * @return {void} Does not return a value.
     */
    toggleSidenav(): void;
    /**
     * Sets the dynamic content area by assigning the provided host to an internal property.
     *
     * @param {ContentAreaDirective} host The ContentAreaDirective instance to be set as the dynamic content area.
     * @return {void} No return value.
     */
    setDynamicContentArea(host: ContentAreaDirective): void;
    /**
     * Pushes a new stack item onto the sidenav stack. The item can be either a menu stack item
     * or a component stack item. Based on the type of the item, the method processes and adds it
     * to the stack accordingly. Additionally, certain UI elements and animations are updated or triggered.
     *
     * @param {SidenavStackItem} item - The stack item to be added. This can either represent a menu
     *                                  (with title, badge, items) or a component (with data and behavior).
     * @return {Promise<void>} - A promise that resolves once the push operation and associated
     *                           animations have been completed.
     */
    push(item: SidenavStackItem): Promise<void>;
    /**
     * Removes the top item from the navigation stack and updates the display.
     * If the stack contains only one or no items, it resolves immediately without making changes.
     * Adjusts the content displayed based on the type of the new top item in the stack.
     * Persists the stack state if configured to do so.
     * Executes an animation to visually represent the stack update.
     *
     * @return {Promise<void>} A promise that resolves when the operation is complete.
     */
    pop(): Promise<void>;
    /**
     * Restores the stack from local storage if available; otherwise, initializes the stack from the provided root items.
     *
     * @param {StackMenuItem[]} rootItems - An array of StackMenuItem objects representing the root stack menu items.
     * @return {void} Does not return any value.
     */
    restoreStackHybrid(rootItems: StackMenuItem[]): void;
    /**
     * Restores the stack state from the browser's localStorage. The method retrieves a serialized stack,
     * validates its type, and deserializes appropriate items, reconstructing the stack content.
     * Invalid or unparsable data will result in an empty stack being restored.
     *
     * @return {void} Does not return any value.
     */
    restoreStackFromStorage(): void;
    /**
     * Restores the menu stack to reflect the current application route based on the given menu root items.
     * It clears the existing menu stack, rebuilds it starting from the root items, and persists the updated stack.
     *
     * @param {StackMenuItem[]} rootItems - An array of StackMenuItem objects representing the root menu structure.
     * @return {void} This method does not return a value.
     */
    restoreStackFromMenuRoot(rootItems: StackMenuItem[]): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SidenavService>;
}

export { ContentAreaDirective, LinkItem, Sidenav, SidenavMenu, SidenavService, isComponentStackItem, isMenuStackItem };
export type { ComponentStackItem, MenuStackItem, SerializableStackItem, SidenavStackItem, StackMenuItem };