UNPKG

11.7 kBJavaScriptView Raw
1import * as i0 from '@angular/core';
2import { InjectionToken, Directive, Input, EventEmitter, Optional, Inject, SkipSelf, Output, NgModule } from '@angular/core';
3import * as i1 from '@angular/cdk/collections';
4import { coerceBooleanProperty } from '@angular/cdk/coercion';
5import { Subject, Subscription } from 'rxjs';
6
7/**
8 * @license
9 * Copyright Google LLC All Rights Reserved.
10 *
11 * Use of this source code is governed by an MIT-style license that can be
12 * found in the LICENSE file at https://angular.io/license
13 */
14/** Used to generate unique ID for each accordion. */
15let nextId$1 = 0;
16/**
17 * Injection token that can be used to reference instances of `CdkAccordion`. It serves
18 * as alternative token to the actual `CdkAccordion` class which could cause unnecessary
19 * retention of the class and its directive metadata.
20 */
21const CDK_ACCORDION = new InjectionToken('CdkAccordion');
22/**
23 * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
24 */
25class CdkAccordion {
26 constructor() {
27 /** Emits when the state of the accordion changes */
28 this._stateChanges = new Subject();
29 /** Stream that emits true/false when openAll/closeAll is triggered. */
30 this._openCloseAllActions = new Subject();
31 /** A readonly id value to use for unique selection coordination. */
32 this.id = `cdk-accordion-${nextId$1++}`;
33 this._multi = false;
34 }
35 /** Whether the accordion should allow multiple expanded accordion items simultaneously. */
36 get multi() {
37 return this._multi;
38 }
39 set multi(multi) {
40 this._multi = coerceBooleanProperty(multi);
41 }
42 /** Opens all enabled accordion items in an accordion where multi is enabled. */
43 openAll() {
44 if (this._multi) {
45 this._openCloseAllActions.next(true);
46 }
47 }
48 /** Closes all enabled accordion items in an accordion where multi is enabled. */
49 closeAll() {
50 this._openCloseAllActions.next(false);
51 }
52 ngOnChanges(changes) {
53 this._stateChanges.next(changes);
54 }
55 ngOnDestroy() {
56 this._stateChanges.complete();
57 this._openCloseAllActions.complete();
58 }
59}
60CdkAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
61CdkAccordion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: { multi: "multi" }, providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }], exportAs: ["cdkAccordion"], usesOnChanges: true, ngImport: i0 });
62i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordion, decorators: [{
63 type: Directive,
64 args: [{
65 selector: 'cdk-accordion, [cdkAccordion]',
66 exportAs: 'cdkAccordion',
67 providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }],
68 }]
69 }], propDecorators: { multi: [{
70 type: Input
71 }] } });
72
73/**
74 * @license
75 * Copyright Google LLC All Rights Reserved.
76 *
77 * Use of this source code is governed by an MIT-style license that can be
78 * found in the LICENSE file at https://angular.io/license
79 */
80/** Used to generate unique ID for each accordion item. */
81let nextId = 0;
82/**
83 * An basic directive expected to be extended and decorated as a component. Sets up all
84 * events and attributes needed to be managed by a CdkAccordion parent.
85 */
86class CdkAccordionItem {
87 constructor(accordion, _changeDetectorRef, _expansionDispatcher) {
88 this.accordion = accordion;
89 this._changeDetectorRef = _changeDetectorRef;
90 this._expansionDispatcher = _expansionDispatcher;
91 /** Subscription to openAll/closeAll events. */
92 this._openCloseAllSubscription = Subscription.EMPTY;
93 /** Event emitted every time the AccordionItem is closed. */
94 this.closed = new EventEmitter();
95 /** Event emitted every time the AccordionItem is opened. */
96 this.opened = new EventEmitter();
97 /** Event emitted when the AccordionItem is destroyed. */
98 this.destroyed = new EventEmitter();
99 /**
100 * Emits whenever the expanded state of the accordion changes.
101 * Primarily used to facilitate two-way binding.
102 * @docs-private
103 */
104 this.expandedChange = new EventEmitter();
105 /** The unique AccordionItem id. */
106 this.id = `cdk-accordion-child-${nextId++}`;
107 this._expanded = false;
108 this._disabled = false;
109 /** Unregister function for _expansionDispatcher. */
110 this._removeUniqueSelectionListener = () => { };
111 this._removeUniqueSelectionListener = _expansionDispatcher.listen((id, accordionId) => {
112 if (this.accordion &&
113 !this.accordion.multi &&
114 this.accordion.id === accordionId &&
115 this.id !== id) {
116 this.expanded = false;
117 }
118 });
119 // When an accordion item is hosted in an accordion, subscribe to open/close events.
120 if (this.accordion) {
121 this._openCloseAllSubscription = this._subscribeToOpenCloseAllActions();
122 }
123 }
124 /** Whether the AccordionItem is expanded. */
125 get expanded() {
126 return this._expanded;
127 }
128 set expanded(expanded) {
129 expanded = coerceBooleanProperty(expanded);
130 // Only emit events and update the internal value if the value changes.
131 if (this._expanded !== expanded) {
132 this._expanded = expanded;
133 this.expandedChange.emit(expanded);
134 if (expanded) {
135 this.opened.emit();
136 /**
137 * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
138 * the name value is the id of the accordion.
139 */
140 const accordionId = this.accordion ? this.accordion.id : this.id;
141 this._expansionDispatcher.notify(this.id, accordionId);
142 }
143 else {
144 this.closed.emit();
145 }
146 // Ensures that the animation will run when the value is set outside of an `@Input`.
147 // This includes cases like the open, close and toggle methods.
148 this._changeDetectorRef.markForCheck();
149 }
150 }
151 /** Whether the AccordionItem is disabled. */
152 get disabled() {
153 return this._disabled;
154 }
155 set disabled(disabled) {
156 this._disabled = coerceBooleanProperty(disabled);
157 }
158 /** Emits an event for the accordion item being destroyed. */
159 ngOnDestroy() {
160 this.opened.complete();
161 this.closed.complete();
162 this.destroyed.emit();
163 this.destroyed.complete();
164 this._removeUniqueSelectionListener();
165 this._openCloseAllSubscription.unsubscribe();
166 }
167 /** Toggles the expanded state of the accordion item. */
168 toggle() {
169 if (!this.disabled) {
170 this.expanded = !this.expanded;
171 }
172 }
173 /** Sets the expanded state of the accordion item to false. */
174 close() {
175 if (!this.disabled) {
176 this.expanded = false;
177 }
178 }
179 /** Sets the expanded state of the accordion item to true. */
180 open() {
181 if (!this.disabled) {
182 this.expanded = true;
183 }
184 }
185 _subscribeToOpenCloseAllActions() {
186 return this.accordion._openCloseAllActions.subscribe(expanded => {
187 // Only change expanded state if item is enabled
188 if (!this.disabled) {
189 this.expanded = expanded;
190 }
191 });
192 }
193}
194CdkAccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionItem, deps: [{ token: CDK_ACCORDION, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i1.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
195CdkAccordionItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: { expanded: "expanded", disabled: "disabled" }, outputs: { closed: "closed", opened: "opened", destroyed: "destroyed", expandedChange: "expandedChange" }, providers: [
196 // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
197 // registering to the same accordion.
198 { provide: CDK_ACCORDION, useValue: undefined },
199 ], exportAs: ["cdkAccordionItem"], ngImport: i0 });
200i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionItem, decorators: [{
201 type: Directive,
202 args: [{
203 selector: 'cdk-accordion-item, [cdkAccordionItem]',
204 exportAs: 'cdkAccordionItem',
205 providers: [
206 // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
207 // registering to the same accordion.
208 { provide: CDK_ACCORDION, useValue: undefined },
209 ],
210 }]
211 }], ctorParameters: function () { return [{ type: CdkAccordion, decorators: [{
212 type: Optional
213 }, {
214 type: Inject,
215 args: [CDK_ACCORDION]
216 }, {
217 type: SkipSelf
218 }] }, { type: i0.ChangeDetectorRef }, { type: i1.UniqueSelectionDispatcher }]; }, propDecorators: { closed: [{
219 type: Output
220 }], opened: [{
221 type: Output
222 }], destroyed: [{
223 type: Output
224 }], expandedChange: [{
225 type: Output
226 }], expanded: [{
227 type: Input
228 }], disabled: [{
229 type: Input
230 }] } });
231
232/**
233 * @license
234 * Copyright Google LLC All Rights Reserved.
235 *
236 * Use of this source code is governed by an MIT-style license that can be
237 * found in the LICENSE file at https://angular.io/license
238 */
239class CdkAccordionModule {
240}
241CdkAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
242CdkAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionModule, declarations: [CdkAccordion, CdkAccordionItem], exports: [CdkAccordion, CdkAccordionItem] });
243CdkAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionModule });
244i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkAccordionModule, decorators: [{
245 type: NgModule,
246 args: [{
247 exports: [CdkAccordion, CdkAccordionItem],
248 declarations: [CdkAccordion, CdkAccordionItem],
249 }]
250 }] });
251
252/**
253 * @license
254 * Copyright Google LLC All Rights Reserved.
255 *
256 * Use of this source code is governed by an MIT-style license that can be
257 * found in the LICENSE file at https://angular.io/license
258 */
259
260/**
261 * @license
262 * Copyright Google LLC All Rights Reserved.
263 *
264 * Use of this source code is governed by an MIT-style license that can be
265 * found in the LICENSE file at https://angular.io/license
266 */
267
268/**
269 * Generated bundle index. Do not edit.
270 */
271
272export { CdkAccordion, CdkAccordionItem, CdkAccordionModule };
273//# sourceMappingURL=accordion.mjs.map