UNPKG

7.45 kBTypeScriptView Raw
1import { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, QueryList, TemplateRef, NgZone } from '@angular/core';
2import { NgbAccordionConfig } from './accordion-config';
3/**
4 * The context for the [NgbPanelHeader](#/components/accordion/api#NgbPanelHeader) template
5 *
6 * @since 4.1.0
7 */
8export 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 */
23export 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 */
32export declare class NgbPanelTitle {
33 templateRef: TemplateRef<any>;
34 constructor(templateRef: TemplateRef<any>);
35}
36/**
37 * A directive that wraps the accordion panel content.
38 */
39export 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 */
46export 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 */
102export 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 */
124export 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 */
226export 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}