ngx-aside-ease/lib/aside/aside.component.d.ts

ngx-aside-ease is an Angular library that offers a lightweight, performant, and responsive aside panel. This library has multiple options and offers a good user experience.

import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core';
import { InternalAsideService } from '../internal-aside.service';
import { Subject } from 'rxjs';
import { AsideItemDirective } from './item.directive';
import { ActivatedRoute, Router } from '@angular/router';
import { AsideService } from '../aside.service';
import * as i0 from "@angular/core";
export declare class AsideComponent implements OnInit, AfterViewInit, OnDestroy {
    private element;
    private internalAsideService;
    private asideService;
    private router;
    private route;
    private cd;
    minVisible: number;
    minWidth: number;
    width: number;
    maxWidth: string;
    responsiveBreakpoint: number;
    displayCollapsableIcon: boolean;
    asideAnimationTiming: string;
    markerAnimationTiming: string;
    enableResize: boolean;
    resizerColor: string;
    enableMarker: boolean;
    storePreference: boolean;
    updateUrl: boolean;
    paramUrlName: string;
    userWidth: number;
    showCollapsableIcon: boolean;
    asideIsOpen: boolean;
    responsiveMode: boolean;
    asideContentTop: number;
    destroy$: Subject<void>;
    asideFullWidthResponsive: boolean;
    keepUserNavigationChoice: boolean;
    reverse: boolean;
    timeoutID: number;
    asideWrapper: ElementRef<HTMLDivElement>;
    asideContent: ElementRef<HTMLDivElement>;
    resizer: ElementRef<HTMLSpanElement>;
    asideMarker: ElementRef<HTMLSpanElement>;
    items: QueryList<AsideItemDirective>;
    constructor(element: ElementRef<HTMLDivElement>, internalAsideService: InternalAsideService, asideService: AsideService, router: Router, route: ActivatedRoute, cd: ChangeDetectorRef);
    get native(): HTMLDivElement;
    get asideNative(): HTMLDivElement;
    get resizerNative(): HTMLSpanElement;
    get isResponsiveMode(): boolean;
    ngOnInit(): void;
    /**
     * Retrieve the previous stored preference or take the defined width.
     * Initialise CSS variables.
     */
    ngAfterViewInit(): void;
    /**
     * Navigation by URL.
     * Not through the Angular API for synchronous reason. Give priority to the user choice over the default active item.
     * Apply 100 ms delay, a custom font can be not fully loaded.
     */
    activateParamsUrl(): void;
    /**
     * Navigation by URL.
     * Find the corresponding item and activate it.
     */
    findTabToActivate(name: string): HTMLElement | null | undefined;
    updateUrlTabs(text: string): void;
    /**
     * Set the default selected item.
     * Apply an delay of 100 ms in case of loading a custom font.
     * Give priority to user choice (URL) over the default item.
     */
    selectDefaultItem(): void;
    /**
     * Compute the min width in percent based in the provided value for the panel visibility reduction (non responsive mode).
     */
    updateMinWidthPercentDiff(): void;
    /**
     * Responsive mode triggered on basis on the breakpoint set.
     */
    applyResponsive(animate?: boolean): void;
    applyAnimations(animate?: boolean): void;
    /**
     * Position the left marker correctly.
     * Inverse it in reverse mode.
     */
    positionMarker(element: HTMLElement, animated?: boolean): void;
    resize(): void;
    /**
     * Triggered on Mouse and Touch event.
     * Prevent text selection, set the CSS variable for width adaptation, add other event listeners.
     */
    onPointerDown(e: PointerEvent): void;
    /**
     * In responsive mode, display/hide panel totally.
     */
    setAsideFullWidth(): void;
    onCollapseBtnClick(): void;
    /**
     * Reverse the panel position.
     * An overflow hidden has to be applied in reversed mode.
     */
    reverseDisplay(): void;
    onMouseEnter(): void;
    onMouseLeave(): void;
    /**
     * Add active class to the element so the user can overload it with custom styles.
     */
    addClassActiveToElement(element: HTMLElement): void;
    get notOpened(): boolean;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<AsideComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AsideComponent, "ngx-aside", never, { "minVisible": { "alias": "minVisible"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "responsiveBreakpoint": { "alias": "responsiveBreakpoint"; "required": false; }; "displayCollapsableIcon": { "alias": "displayCollapsableIcon"; "required": false; }; "asideAnimationTiming": { "alias": "asideAnimationTiming"; "required": false; }; "markerAnimationTiming": { "alias": "markerAnimationTiming"; "required": false; }; "enableResize": { "alias": "enableResize"; "required": false; }; "resizerColor": { "alias": "resizerColor"; "required": false; }; "enableMarker": { "alias": "enableMarker"; "required": false; }; "storePreference": { "alias": "storePreference"; "required": false; }; "updateUrl": { "alias": "updateUrl"; "required": false; }; "paramUrlName": { "alias": "paramUrlName"; "required": false; }; }, {}, ["items"], ["[ngxTitle]", "[ngxItem]", "*"], true, never>;
}