UNPKG

6.07 kBTypeScriptView Raw
1import { AfterContentChecked, EventEmitter, QueryList, TemplateRef } 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 /**
59 * The panel title.
60 *
61 * You can alternatively use [`NgbPanelTitle`](#/components/accordion/api#NgbPanelTitle) to set panel title.
62 */
63 title: string;
64 /**
65 * Type of the current panel.
66 *
67 * Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`,
68 * `'secondary'`, `'light'` and `'dark'`.
69 */
70 type: string;
71 /**
72 * An optional class applied to the accordion card element that wraps both panel title and content.
73 *
74 * @since 5.3.0
75 */
76 cardClass: string;
77 titleTpl: NgbPanelTitle;
78 headerTpl: NgbPanelHeader;
79 contentTpl: NgbPanelContent;
80 titleTpls: QueryList<NgbPanelTitle>;
81 headerTpls: QueryList<NgbPanelHeader>;
82 contentTpls: QueryList<NgbPanelContent>;
83 ngAfterContentChecked(): void;
84}
85/**
86 * An event emitted right before toggling an accordion panel.
87 */
88export interface NgbPanelChangeEvent {
89 /**
90 * The id of the accordion panel that is being toggled.
91 */
92 panelId: string;
93 /**
94 * The next state of the panel.
95 *
96 * `true` if it will be opened, `false` if closed.
97 */
98 nextState: boolean;
99 /**
100 * Calling this function will prevent panel toggling.
101 */
102 preventDefault: () => void;
103}
104/**
105 * Accordion is a collection of collapsible panels (bootstrap cards).
106 *
107 * It can ensure only one panel is opened at a time and allows to customize panel
108 * headers.
109 */
110export declare class NgbAccordion implements AfterContentChecked {
111 panels: QueryList<NgbPanel>;
112 /**
113 * An array or comma separated strings of panel ids that should be opened **initially**.
114 *
115 * For subsequent changes use methods like `expand()`, `collapse()`, etc. and
116 * the `(panelChange)` event.
117 */
118 activeIds: string | readonly string[];
119 /**
120 * If `true`, only one panel could be opened at a time.
121 *
122 * Opening a new panel will close others.
123 */
124 closeOtherPanels: boolean;
125 /**
126 * If `true`, panel content will be detached from DOM and not simply hidden when the panel is collapsed.
127 */
128 destroyOnHide: boolean;
129 /**
130 * Type of panels.
131 *
132 * Bootstrap provides styles for the following types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'primary'`,
133 * `'secondary'`, `'light'` and `'dark'`.
134 */
135 type: string;
136 /**
137 * Event emitted right before the panel toggle happens.
138 *
139 * See [NgbPanelChangeEvent](#/components/accordion/api#NgbPanelChangeEvent) for payload details.
140 */
141 panelChange: EventEmitter<NgbPanelChangeEvent>;
142 constructor(config: NgbAccordionConfig);
143 /**
144 * Checks if a panel with a given id is expanded.
145 */
146 isExpanded(panelId: string): boolean;
147 /**
148 * Expands a panel with a given id.
149 *
150 * Has no effect if the panel is already expanded or disabled.
151 */
152 expand(panelId: string): void;
153 /**
154 * Expands all panels, if `[closeOthers]` is `false`.
155 *
156 * If `[closeOthers]` is `true`, it will expand the first panel, unless there is already a panel opened.
157 */
158 expandAll(): void;
159 /**
160 * Collapses a panel with the given id.
161 *
162 * Has no effect if the panel is already collapsed or disabled.
163 */
164 collapse(panelId: string): void;
165 /**
166 * Collapses all opened panels.
167 */
168 collapseAll(): void;
169 /**
170 * Toggles a panel with the given id.
171 *
172 * Has no effect if the panel is disabled.
173 */
174 toggle(panelId: string): void;
175 ngAfterContentChecked(): void;
176 private _changeOpenState;
177 private _closeOthers;
178 private _findPanelById;
179 private _updateActiveIds;
180}
181/**
182 * A directive to put on a button that toggles panel opening and closing.
183 *
184 * To be used inside the [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader)
185 *
186 * @since 4.1.0
187 */
188export declare class NgbPanelToggle {
189 accordion: NgbAccordion;
190 panel: NgbPanel;
191 static ngAcceptInputType_ngbPanelToggle: NgbPanel | '';
192 set ngbPanelToggle(panel: NgbPanel);
193 constructor(accordion: NgbAccordion, panel: NgbPanel);
194}