1 | import { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, QueryList, TemplateRef, NgZone } from '@angular/core';
|
2 | import { NgbAccordionConfig } from './accordion-config';
|
3 | /**
|
4 | * The context for the [NgbPanelHeader](#/components/accordion/api#NgbPanelHeader) template
|
5 | *
|
6 | * @since 4.1.0
|
7 | */
|
8 | export interface NgbPanelHeaderContext {
|
9 | /**
|
10 | * `True` if current panel is opened
|
11 | */
|
12 | opened: boolean;
|
13 | }
|
14 | /**
|
15 | * A directive that wraps an accordion panel header with any HTML markup and a toggling button
|
16 | * marked with [`NgbPanelToggle`](#/components/accordion/api#NgbPanelToggle).
|
17 | * See the [header customization demo](#/components/accordion/examples#header) for more details.
|
18 | *
|
19 | * You can also use [`NgbPanelTitle`](#/components/accordion/api#NgbPanelTitle) to customize only the panel title.
|
20 | *
|
21 | * @since 4.1.0
|
22 | */
|
23 | export declare class NgbPanelHeader {
|
24 | templateRef: TemplateRef<any>;
|
25 | constructor(templateRef: TemplateRef<any>);
|
26 | }
|
27 | /**
|
28 | * A directive that wraps only the panel title with HTML markup inside.
|
29 | *
|
30 | * You can also use [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader) to customize the full panel header.
|
31 | */
|
32 | export declare class NgbPanelTitle {
|
33 | templateRef: TemplateRef<any>;
|
34 | constructor(templateRef: TemplateRef<any>);
|
35 | }
|
36 | /**
|
37 | * A directive that wraps the accordion panel content.
|
38 | */
|
39 | export declare class NgbPanelContent {
|
40 | templateRef: TemplateRef<any>;
|
41 | constructor(templateRef: TemplateRef<any>);
|
42 | }
|
43 | /**
|
44 | * A directive that wraps an individual accordion panel with title and collapsible content.
|
45 | */
|
46 | export declare class NgbPanel implements AfterContentChecked {
|
47 | /**
|
48 | * If `true`, the panel is disabled an can't be toggled.
|
49 | */
|
50 | disabled: boolean;
|
51 | /**
|
52 | * An optional id for the panel that must be unique on the page.
|
53 | *
|
54 | * If not provided, it will be auto-generated in the `ngb-panel-xxx` format.
|
55 | */
|
56 | id: string;
|
57 | isOpen: boolean;
|
58 | initClassDone: boolean;
|
59 | transitionRunning: boolean;
|
60 | /**
|
61 | * The panel title.
|
62 | *
|
63 | * You can alternatively use [`NgbPanelTitle`](#/components/accordion/api#NgbPanelTitle) to set panel title.
|
64 | */
|
65 | title: string;
|
66 | /**
|
67 | * Type of the current panel.
|
68 | *
|
69 | * Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`,
|
70 | * `'secondary'`, `'light'` and `'dark'`.
|
71 | */
|
72 | type: string;
|
73 | /**
|
74 | * An optional class applied to the accordion card element that wraps both panel title and content.
|
75 | *
|
76 | * @since 5.3.0
|
77 | */
|
78 | cardClass: string;
|
79 | /**
|
80 | * An event emitted when the panel is shown, after the transition. It has no payload.
|
81 | *
|
82 | * @since 8.0.0
|
83 | */
|
84 | shown: EventEmitter<void>;
|
85 | /**
|
86 | * An event emitted when the panel is hidden, after the transition. It has no payload.
|
87 | *
|
88 | * @since 8.0.0
|
89 | */
|
90 | hidden: EventEmitter<void>;
|
91 | titleTpl: NgbPanelTitle;
|
92 | headerTpl: NgbPanelHeader;
|
93 | contentTpl: NgbPanelContent;
|
94 | titleTpls: QueryList<NgbPanelTitle>;
|
95 | headerTpls: QueryList<NgbPanelHeader>;
|
96 | contentTpls: QueryList<NgbPanelContent>;
|
97 | ngAfterContentChecked(): void;
|
98 | }
|
99 | /**
|
100 | * An event emitted right before toggling an accordion panel.
|
101 | */
|
102 | export interface NgbPanelChangeEvent {
|
103 | /**
|
104 | * The id of the accordion panel being toggled.
|
105 | */
|
106 | panelId: string;
|
107 | /**
|
108 | * The next state of the panel.
|
109 | *
|
110 | * `true` if it will be opened, `false` if closed.
|
111 | */
|
112 | nextState: boolean;
|
113 | /**
|
114 | * Calling this function will prevent panel toggling.
|
115 | */
|
116 | preventDefault: () => void;
|
117 | }
|
118 | /**
|
119 | * Accordion is a collection of collapsible panels (bootstrap cards).
|
120 | *
|
121 | * It can ensure only one panel is opened at a time and allows to customize panel
|
122 | * headers.
|
123 | */
|
124 | export declare class NgbAccordion implements AfterContentChecked {
|
125 | private _element;
|
126 | private _ngZone;
|
127 | private _changeDetector;
|
128 | panels: QueryList<NgbPanel>;
|
129 | /**
|
130 | * If `true`, accordion will be animated.
|
131 | *
|
132 | * @since 8.0.0
|
133 | */
|
134 | animation: any;
|
135 | /**
|
136 | * An array or comma separated strings of panel ids that should be opened **initially**.
|
137 | *
|
138 | * For subsequent changes use methods like `expand()`, `collapse()`, etc. and
|
139 | * the `(panelChange)` event.
|
140 | */
|
141 | activeIds: string | readonly string[];
|
142 | /**
|
143 | * If `true`, only one panel could be opened at a time.
|
144 | *
|
145 | * Opening a new panel will close others.
|
146 | */
|
147 | closeOtherPanels: boolean;
|
148 | /**
|
149 | * If `true`, panel content will be detached from DOM and not simply hidden when the panel is collapsed.
|
150 | */
|
151 | destroyOnHide: boolean;
|
152 | /**
|
153 | * Type of panels.
|
154 | *
|
155 | * Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`,
|
156 | * `'secondary'`, `'light'` and `'dark'`.
|
157 | */
|
158 | type: string;
|
159 | /**
|
160 | * Event emitted right before the panel toggle happens.
|
161 | *
|
162 | * See [NgbPanelChangeEvent](#/components/accordion/api#NgbPanelChangeEvent) for payload details.
|
163 | */
|
164 | panelChange: EventEmitter<NgbPanelChangeEvent>;
|
165 | /**
|
166 | * An event emitted when the expanding animation is finished on the panel. The payload is the panel id.
|
167 | *
|
168 | * @since 8.0.0
|
169 | */
|
170 | shown: EventEmitter<string>;
|
171 | /**
|
172 | * An event emitted when the collapsing animation is finished on the panel, and before the panel element is removed.
|
173 | * The payload is the panel id.
|
174 | *
|
175 | * @since 8.0.0
|
176 | */
|
177 | hidden: EventEmitter<string>;
|
178 | constructor(config: NgbAccordionConfig, _element: ElementRef, _ngZone: NgZone, _changeDetector: ChangeDetectorRef);
|
179 | /**
|
180 | * Checks if a panel with a given id is expanded.
|
181 | */
|
182 | isExpanded(panelId: string): boolean;
|
183 | /**
|
184 | * Expands a panel with a given id.
|
185 | *
|
186 | * Has no effect if the panel is already expanded or disabled.
|
187 | */
|
188 | expand(panelId: string): void;
|
189 | /**
|
190 | * Expands all panels, if `[closeOthers]` is `false`.
|
191 | *
|
192 | * If `[closeOthers]` is `true`, it will expand the first panel, unless there is already a panel opened.
|
193 | */
|
194 | expandAll(): void;
|
195 | /**
|
196 | * Collapses a panel with the given id.
|
197 | *
|
198 | * Has no effect if the panel is already collapsed or disabled.
|
199 | */
|
200 | collapse(panelId: string): void;
|
201 | /**
|
202 | * Collapses all opened panels.
|
203 | */
|
204 | collapseAll(): void;
|
205 | /**
|
206 | * Toggles a panel with the given id.
|
207 | *
|
208 | * Has no effect if the panel is disabled.
|
209 | */
|
210 | toggle(panelId: string): void;
|
211 | ngAfterContentChecked(): void;
|
212 | private _changeOpenState;
|
213 | private _closeOthers;
|
214 | private _findPanelById;
|
215 | private _updateActiveIds;
|
216 | private _runTransitions;
|
217 | private _getPanelElement;
|
218 | }
|
219 | /**
|
220 | * A directive to put on a button that toggles panel opening and closing.
|
221 | *
|
222 | * To be used inside the [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader)
|
223 | *
|
224 | * @since 4.1.0
|
225 | */
|
226 | export declare class NgbPanelToggle {
|
227 | accordion: NgbAccordion;
|
228 | panel: NgbPanel;
|
229 | static ngAcceptInputType_ngbPanelToggle: NgbPanel | '';
|
230 | set ngbPanelToggle(panel: NgbPanel);
|
231 | constructor(accordion: NgbAccordion, panel: NgbPanel);
|
232 | }
|