@ng-bootstrap/ng-bootstrap/types/ng-bootstrap-ng-bootstrap-nav.d.ts

Angular powered Bootstrap

import * as i0 from '@angular/core';
import { AfterContentInit, OnChanges, DestroyRef, EventEmitter, QueryList, OnInit, TemplateRef, SimpleChanges, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';

/**
 * Context passed to the nav content template.
 *
 * See [this demo](#/components/nav/examples#keep-content) as the example.
 *
 * @since 5.2.0
 */
interface NgbNavContentContext {
    /**
     * If `true`, current nav content is visible and active
     */
    $implicit: boolean;
}
/**
 * This directive must be used to wrap content to be displayed in the nav.
 *
 * @since 5.2.0
 */
declare class NgbNavContent {
    templateRef: TemplateRef<any>;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavContent, "ng-template[ngbNavContent]", never, {}, {}, never, never, true, never>;
}
/**
 * This directive applies a specific role on a non-container based ngbNavItem.
 *
 * @since 14.1.0
 */
declare class NgbNavItemRole {
    role: string;
    nav: NgbNav;
    constructor(role: string);
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavItemRole, [{ attribute: "role"; }]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavItemRole, "[ngbNavItem]:not(ng-container)", never, {}, {}, never, never, true, never>;
}
/**
 * The directive used to group nav link and related nav content. As well as set nav identifier and some options.
 *
 * @since 5.2.0
 */
declare class NgbNavItem implements OnInit {
    private _nav;
    private _nativeElement;
    /**
     * If `true`, non-active current nav item content will be removed from DOM
     * Otherwise it will just be hidden
     */
    destroyOnHide: any;
    /**
     * If `true`, the current nav item is disabled and can't be toggled by user.
     *
     * Nevertheless disabled nav can be selected programmatically via the `.select()` method and the `[activeId]` binding.
     */
    disabled: boolean;
    /**
     * The id used for the DOM elements.
     * Must be unique inside the document in case you have multiple `ngbNav`s on the page.
     *
     * Autogenerated as `ngb-nav-XXX` if not provided.
     */
    domId: string;
    /**
     * The id used as a model for active nav.
     * It can be anything, but must be unique inside one `ngbNav`.
     *
     * The only limitation is that it is not possible to have the `''` (empty string) as id,
     * because ` ngbNavItem `, `ngbNavItem=''` and `[ngbNavItem]="''"` are indistinguishable
     */
    _id: any;
    /**
     * An event emitted when the fade in transition is finished on the related nav content
     *
     * @since 8.0.0
     */
    shown: EventEmitter<void>;
    /**
     * An event emitted when the fade out transition is finished on the related nav content
     *
     * @since 8.0.0
     */
    hidden: EventEmitter<void>;
    contentTpl?: NgbNavContent;
    ngOnInit(): void;
    get active(): boolean;
    get id(): any;
    get panelDomId(): string;
    isPanelInDom(): boolean;
    /**
     * @internal
     */
    isNgContainer(): boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavItem, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavItem, "[ngbNavItem]", ["ngbNavItem"], { "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "domId": { "alias": "domId"; "required": false; }; "_id": { "alias": "ngbNavItem"; "required": false; }; }, { "shown": "shown"; "hidden": "hidden"; }, ["contentTpl"], never, true, never>;
}
/**
 * A nav directive that helps with implementing tabbed navigation components.
 *
 * @since 5.2.0
 */
declare class NgbNav implements AfterContentInit, OnChanges {
    role: string;
    static ngAcceptInputType_orientation: string;
    static ngAcceptInputType_roles: boolean | string;
    private _config;
    private _cd;
    private _document;
    private _nativeElement;
    destroyRef: DestroyRef;
    _navigatingWithKeyboard: boolean;
    /**
     * The id of the nav that should be active
     *
     * You could also use the `.select()` method and the `(navChange)` event
     */
    activeId: any;
    /**
     * The event emitted after the active nav changes
     * The payload of the event is the newly active nav id
     *
     * If you want to prevent nav change, you should use `(navChange)` event
     */
    activeIdChange: EventEmitter<any>;
    /**
     * If `true`, nav change will be animated.
     *
     * @since 8.0.0
     */
    animation: boolean;
    /**
     * If `true`, non-active nav content will be removed from DOM
     * Otherwise it will just be hidden
     */
    destroyOnHide: boolean;
    /**
     * The orientation of navs.
     *
     * Using `vertical` will also add the `aria-orientation` attribute
     */
    orientation: "horizontal" | "vertical";
    /**
     * Role attribute generating strategy:
     * - `false` - no role attributes will be generated
     * - `'tablist'` - 'tablist', 'tab' and 'tabpanel' will be generated (default)
     */
    roles: false | "tablist";
    /**
     * Keyboard support for nav focus/selection using arrow keys.
     *
     * * `true` - navs will be focused using keyboard arrow keys
     * * `false` - no keyboard support
     * * `'changeWithArrows'` -  nav will be selected using keyboard arrow keys
     *
     * See the [list of available keyboard shortcuts](#/components/nav/overview#keyboard-shortcuts).
     *
     * @since 6.1.0
     */
    keyboard: boolean | "changeWithArrows";
    /**
     * An event emitted when the fade in transition is finished for one of the items.
     *
     * Payload of the event is the nav id that was just shown.
     *
     * @since 8.0.0
     */
    shown: EventEmitter<any>;
    /**
     * An event emitted when the fade out transition is finished for one of the items.
     *
     * Payload of the event is the nav id that was just hidden.
     *
     * @since 8.0.0
     */
    hidden: EventEmitter<any>;
    items: QueryList<NgbNavItem>;
    links: QueryList<NgbNavLinkBase>;
    navItemChange$: Subject<NgbNavItem | null>;
    constructor(role: string);
    /**
     * The nav change event emitted right before the nav change happens on user click.
     *
     * This event won't be emitted if nav is changed programmatically via `[activeId]` or `.select()`.
     *
     * See [`NgbNavChangeEvent`](#/components/nav/api#NgbNavChangeEvent) for payload details.
     */
    navChange: EventEmitter<NgbNavChangeEvent<any>>;
    click(item: NgbNavItem): void;
    onFocusout({ relatedTarget }: FocusEvent): void;
    onKeyDown(event: KeyboardEvent): void;
    /**
     * Selects the nav with the given id and shows its associated pane.
     * Any other nav that was previously selected becomes unselected and its associated pane is hidden.
     */
    select(id: any): void;
    ngAfterContentInit(): void;
    ngOnChanges({ activeId }: SimpleChanges): void;
    private _updateActiveId;
    private _notifyItemChanged;
    private _getItemById;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNav, [{ attribute: "role"; }]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNav, "[ngbNav]", ["ngbNav"], { "activeId": { "alias": "activeId"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "roles": { "alias": "roles"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; }, { "activeIdChange": "activeIdChange"; "shown": "shown"; "hidden": "hidden"; "navChange": "navChange"; }, ["items", "links"], never, true, never>;
}
declare class NgbNavLinkBase {
    role: string;
    navItem: NgbNavItem;
    nav: NgbNav;
    nativeElement: HTMLElement;
    constructor(role: string);
    get tabindex(): -1 | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavLinkBase, [{ attribute: "role"; }]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavLinkBase, "[ngbNavLink]", never, {}, {}, never, never, true, never>;
}
/**
 * A directive to mark the nav link when used on a button element.
 */
declare class NgbNavLinkButton extends NgbNavLinkBase {
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavLinkButton, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavLinkButton, "button[ngbNavLink]", never, {}, {}, never, never, true, never>;
}
/**
 * A directive to mark the nav link when used on a link element.
 *
 * @since 5.2.0
 */
declare class NgbNavLink extends NgbNavLinkBase {
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavLink, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavLink, "a[ngbNavLink]", never, {}, {}, never, never, true, never>;
}
/**
 * The payload of the change event emitted right before the nav change happens on user click.
 *
 * This event won't be emitted if nav is changed programmatically via `[activeId]` or `.select()`.
 *
 * @since 5.2.0
 */
interface NgbNavChangeEvent<T = any> {
    /**
     * Id of the currently active nav.
     */
    activeId: T;
    /**
     * Id of the newly selected nav.
     */
    nextId: T;
    /**
     * Function that will prevent nav change if called.
     */
    preventDefault: () => void;
}

declare class NgbNavPane {
    nativeElement: HTMLElement;
    item: NgbNavItem;
    nav: NgbNav;
    role: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavPane, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbNavPane, "[ngbNavPane]", never, { "item": { "alias": "item"; "required": false; }; "nav": { "alias": "nav"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, never, true, never>;
}
/**
 * The outlet where currently active nav content will be displayed.
 *
 * @since 5.2.0
 */
declare class NgbNavOutlet implements AfterViewInit {
    private _cd;
    private _ngZone;
    private _activePane;
    private _panes;
    /**
     * A role to set on the nav pane
     */
    paneRole: any;
    /**
     * Reference to the `NgbNav`
     */
    nav: NgbNav;
    isPanelTransitioning(item: NgbNavItem): boolean;
    ngAfterViewInit(): void;
    private _updateActivePane;
    private _getPaneForItem;
    private _getActivePane;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavOutlet, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgbNavOutlet, "[ngbNavOutlet]", never, { "paneRole": { "alias": "paneRole"; "required": false; }; "nav": { "alias": "ngbNavOutlet"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * A configuration service for the [`NgbNav`](#/components/nav/api#NgbNav) component.
 *
 * You can inject this service, typically in your root component, and customize the values of its properties in
 * order to provide default values for all the navs used in the application.
 *
 * @since 5.2.0
 */
declare class NgbNavConfig {
    private _ngbConfig;
    private _animation;
    destroyOnHide: boolean;
    orientation: 'horizontal' | 'vertical';
    roles: 'tablist' | false;
    keyboard: boolean | 'changeWithArrows';
    get animation(): boolean;
    set animation(animation: boolean);
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavConfig, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<NgbNavConfig>;
}

declare class NgbNavModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<NgbNavModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<NgbNavModule, never, [typeof NgbNavContent, typeof NgbNav, typeof NgbNavItem, typeof NgbNavItemRole, typeof NgbNavLink, typeof NgbNavLinkButton, typeof NgbNavLinkBase, typeof NgbNavOutlet, typeof NgbNavPane], [typeof NgbNavContent, typeof NgbNav, typeof NgbNavItem, typeof NgbNavItemRole, typeof NgbNavLink, typeof NgbNavLinkButton, typeof NgbNavLinkBase, typeof NgbNavOutlet, typeof NgbNavPane]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<NgbNavModule>;
}

export { NgbNav, NgbNavConfig, NgbNavContent, NgbNavItem, NgbNavItemRole, NgbNavLink, NgbNavLinkBase, NgbNavLinkButton, NgbNavModule, NgbNavOutlet, NgbNavPane };
export type { NgbNavChangeEvent, NgbNavContentContext };