1 | import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
|
2 | import { Subject } from 'rxjs';
|
3 | import { NgbNavConfig } from './nav-config';
|
4 | /**
|
5 | * Context passed to the nav content template.
|
6 | *
|
7 | * See [this demo](#/components/nav/examples#keep-content) as the example.
|
8 | *
|
9 | * @since 5.2.0
|
10 | */
|
11 | export interface NgbNavContentContext {
|
12 | /**
|
13 | * If `true`, current nav content is visible and active
|
14 | */
|
15 | $implicit: boolean;
|
16 | }
|
17 | /**
|
18 | * This directive must be used to wrap content to be displayed in the nav.
|
19 | *
|
20 | * @since 5.2.0
|
21 | */
|
22 | export declare class NgbNavContent {
|
23 | templateRef: TemplateRef<any>;
|
24 | constructor(templateRef: TemplateRef<any>);
|
25 | }
|
26 | /**
|
27 | * The directive used to group nav link and related nav content. As well as set nav identifier and some options.
|
28 | *
|
29 | * @since 5.2.0
|
30 | */
|
31 | export declare class NgbNavItem implements AfterContentChecked, OnInit {
|
32 | elementRef: ElementRef<any>;
|
33 | private _nav;
|
34 | /**
|
35 | * If `true`, non-active current nav item content will be removed from DOM
|
36 | * Otherwise it will just be hidden
|
37 | */
|
38 | destroyOnHide: any;
|
39 | /**
|
40 | * If `true`, the current nav item is disabled and can't be toggled by user.
|
41 | *
|
42 | * Nevertheless disabled nav can be selected programmatically via the `.select()` method and the `[activeId]` binding.
|
43 | */
|
44 | disabled: boolean;
|
45 | /**
|
46 | * The id used for the DOM elements.
|
47 | * Must be unique inside the document in case you have multiple `ngbNav`s on the page.
|
48 | *
|
49 | * Autogenerated as `ngb-nav-XXX` if not provided.
|
50 | */
|
51 | domId: string;
|
52 | /**
|
53 | * The id used as a model for active nav.
|
54 | * It can be anything, but must be unique inside one `ngbNav`.
|
55 | *
|
56 | * The only limitation is that it is not possible to have the `''` (empty string) as id,
|
57 | * because ` ngbNavItem `, `ngbNavItem=''` and `[ngbNavItem]="''"` are indistinguishable
|
58 | */
|
59 | _id: any;
|
60 | /**
|
61 | * An event emitted when the fade in transition is finished on the related nav content
|
62 | *
|
63 | * @since 8.0.0
|
64 | */
|
65 | shown: EventEmitter<void>;
|
66 | /**
|
67 | * An event emitted when the fade out transition is finished on the related nav content
|
68 | *
|
69 | * @since 8.0.0
|
70 | */
|
71 | hidden: EventEmitter<void>;
|
72 | contentTpl: NgbNavContent | null;
|
73 | contentTpls: QueryList<NgbNavContent>;
|
74 | constructor(nav: any, elementRef: ElementRef<any>);
|
75 | ngAfterContentChecked(): void;
|
76 | ngOnInit(): void;
|
77 | get active(): boolean;
|
78 | get id(): any;
|
79 | get panelDomId(): string;
|
80 | isPanelInDom(): boolean;
|
81 | }
|
82 | /**
|
83 | * A nav directive that helps with implementing tabbed navigation components.
|
84 | *
|
85 | * @since 5.2.0
|
86 | */
|
87 | export declare class NgbNav implements AfterContentInit, OnDestroy {
|
88 | role: string;
|
89 | private _cd;
|
90 | private _document;
|
91 | static ngAcceptInputType_orientation: string;
|
92 | static ngAcceptInputType_roles: boolean | string;
|
93 | /**
|
94 | * The id of the nav that should be active
|
95 | *
|
96 | * You could also use the `.select()` method and the `(navChange)` event
|
97 | */
|
98 | activeId: any;
|
99 | /**
|
100 | * The event emitted after the active nav changes
|
101 | * The payload of the event is the newly active nav id
|
102 | *
|
103 | * If you want to prevent nav change, you should use `(navChange)` event
|
104 | */
|
105 | activeIdChange: EventEmitter<any>;
|
106 | /**
|
107 | * If `true`, nav change will be animated.
|
108 | *
|
109 | * @since 8.0.0
|
110 | */
|
111 | animation: boolean;
|
112 | /**
|
113 | * If `true`, non-active nav content will be removed from DOM
|
114 | * Otherwise it will just be hidden
|
115 | */
|
116 | destroyOnHide: any;
|
117 | /**
|
118 | * The orientation of navs.
|
119 | *
|
120 | * Using `vertical` will also add the `aria-orientation` attribute
|
121 | */
|
122 | orientation: 'horizontal' | 'vertical';
|
123 | /**
|
124 | * Role attribute generating strategy:
|
125 | * - `false` - no role attributes will be generated
|
126 | * - `'tablist'` - 'tablist', 'tab' and 'tabpanel' will be generated (default)
|
127 | */
|
128 | roles: 'tablist' | false;
|
129 | /**
|
130 | * Keyboard support for nav focus/selection using arrow keys.
|
131 | *
|
132 | * * `false` - no keyboard support.
|
133 | * * `true` - navs will be focused using keyboard arrow keys
|
134 | * * `'changeWithArrows'` - nav will be selected using keyboard arrow keys
|
135 | *
|
136 | * See the [list of available keyboard shortcuts](#/components/nav/overview#keyboard-shortcuts).
|
137 | *
|
138 | * @since 6.1.0
|
139 | */
|
140 | keyboard: boolean | 'changeWithArrows';
|
141 | /**
|
142 | * An event emitted when the fade in transition is finished for one of the items.
|
143 | *
|
144 | * Payload of the event is the nav id that was just shown.
|
145 | *
|
146 | * @since 8.0.0
|
147 | */
|
148 | shown: EventEmitter<any>;
|
149 | /**
|
150 | * An event emitted when the fade out transition is finished for one of the items.
|
151 | *
|
152 | * Payload of the event is the nav id that was just hidden.
|
153 | *
|
154 | * @since 8.0.0
|
155 | */
|
156 | hidden: EventEmitter<any>;
|
157 | items: QueryList<NgbNavItem>;
|
158 | links: QueryList<NgbNavLink>;
|
159 | destroy$: Subject<void>;
|
160 | navItemChange$: Subject<NgbNavItem | null>;
|
161 | constructor(role: string, config: NgbNavConfig, _cd: ChangeDetectorRef, _document: any);
|
162 | /**
|
163 | * The nav change event emitted right before the nav change happens on user click.
|
164 | *
|
165 | * This event won't be emitted if nav is changed programmatically via `[activeId]` or `.select()`.
|
166 | *
|
167 | * See [`NgbNavChangeEvent`](#/components/nav/api#NgbNavChangeEvent) for payload details.
|
168 | */
|
169 | navChange: EventEmitter<NgbNavChangeEvent<any>>;
|
170 | click(item: NgbNavItem): void;
|
171 | onKeyDown(event: KeyboardEvent): void;
|
172 | /**
|
173 | * Selects the nav with the given id and shows its associated pane.
|
174 | * Any other nav that was previously selected becomes unselected and its associated pane is hidden.
|
175 | */
|
176 | select(id: any): void;
|
177 | ngAfterContentInit(): void;
|
178 | ngOnChanges({ activeId }: SimpleChanges): void;
|
179 | ngOnDestroy(): void;
|
180 | private _updateActiveId;
|
181 | private _notifyItemChanged;
|
182 | private _getItemById;
|
183 | }
|
184 | /**
|
185 | * A directive to put on the nav link.
|
186 | *
|
187 | * @since 5.2.0
|
188 | */
|
189 | export declare class NgbNavLink {
|
190 | role: string;
|
191 | navItem: NgbNavItem;
|
192 | nav: NgbNav;
|
193 | elRef: ElementRef;
|
194 | constructor(role: string, navItem: NgbNavItem, nav: NgbNav, elRef: ElementRef);
|
195 | hasNavItemClass(): boolean;
|
196 | }
|
197 | /**
|
198 | * The payload of the change event emitted right before the nav change happens on user click.
|
199 | *
|
200 | * This event won't be emitted if nav is changed programmatically via `[activeId]` or `.select()`.
|
201 | *
|
202 | * @since 5.2.0
|
203 | */
|
204 | export interface NgbNavChangeEvent<T = any> {
|
205 | /**
|
206 | * Id of the currently active nav.
|
207 | */
|
208 | activeId: T;
|
209 | /**
|
210 | * Id of the newly selected nav.
|
211 | */
|
212 | nextId: T;
|
213 | /**
|
214 | * Function that will prevent nav change if called.
|
215 | */
|
216 | preventDefault: () => void;
|
217 | }
|