accordion.mjs 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, inject, booleanAttribute, Directive, Input, ChangeDetectorRef, EventEmitter, Output, NgModule } from '@angular/core';
  3. import { Subject, Subscription } from 'rxjs';
  4. import { _ as _IdGenerator } from './id-generator-Dw_9dSDu.mjs';
  5. import { U as UniqueSelectionDispatcher } from './unique-selection-dispatcher-DtHZDqyJ.mjs';
  6. /**
  7. * Injection token that can be used to reference instances of `CdkAccordion`. It serves
  8. * as alternative token to the actual `CdkAccordion` class which could cause unnecessary
  9. * retention of the class and its directive metadata.
  10. */
  11. const CDK_ACCORDION = new InjectionToken('CdkAccordion');
  12. /**
  13. * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
  14. */
  15. class CdkAccordion {
  16. /** Emits when the state of the accordion changes */
  17. _stateChanges = new Subject();
  18. /** Stream that emits true/false when openAll/closeAll is triggered. */
  19. _openCloseAllActions = new Subject();
  20. /** A readonly id value to use for unique selection coordination. */
  21. id = inject(_IdGenerator).getId('cdk-accordion-');
  22. /** Whether the accordion should allow multiple expanded accordion items simultaneously. */
  23. multi = false;
  24. /** Opens all enabled accordion items in an accordion where multi is enabled. */
  25. openAll() {
  26. if (this.multi) {
  27. this._openCloseAllActions.next(true);
  28. }
  29. }
  30. /** Closes all enabled accordion items. */
  31. closeAll() {
  32. this._openCloseAllActions.next(false);
  33. }
  34. ngOnChanges(changes) {
  35. this._stateChanges.next(changes);
  36. }
  37. ngOnDestroy() {
  38. this._stateChanges.complete();
  39. this._openCloseAllActions.complete();
  40. }
  41. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  42. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.6", type: CdkAccordion, isStandalone: true, selector: "cdk-accordion, [cdkAccordion]", inputs: { multi: ["multi", "multi", booleanAttribute] }, providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }], exportAs: ["cdkAccordion"], usesOnChanges: true, ngImport: i0 });
  43. }
  44. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordion, decorators: [{
  45. type: Directive,
  46. args: [{
  47. selector: 'cdk-accordion, [cdkAccordion]',
  48. exportAs: 'cdkAccordion',
  49. providers: [{ provide: CDK_ACCORDION, useExisting: CdkAccordion }],
  50. }]
  51. }], propDecorators: { multi: [{
  52. type: Input,
  53. args: [{ transform: booleanAttribute }]
  54. }] } });
  55. /**
  56. * A basic directive expected to be extended and decorated as a component. Sets up all
  57. * events and attributes needed to be managed by a CdkAccordion parent.
  58. */
  59. class CdkAccordionItem {
  60. accordion = inject(CDK_ACCORDION, { optional: true, skipSelf: true });
  61. _changeDetectorRef = inject(ChangeDetectorRef);
  62. _expansionDispatcher = inject(UniqueSelectionDispatcher);
  63. /** Subscription to openAll/closeAll events. */
  64. _openCloseAllSubscription = Subscription.EMPTY;
  65. /** Event emitted every time the AccordionItem is closed. */
  66. closed = new EventEmitter();
  67. /** Event emitted every time the AccordionItem is opened. */
  68. opened = new EventEmitter();
  69. /** Event emitted when the AccordionItem is destroyed. */
  70. destroyed = new EventEmitter();
  71. /**
  72. * Emits whenever the expanded state of the accordion changes.
  73. * Primarily used to facilitate two-way binding.
  74. * @docs-private
  75. */
  76. expandedChange = new EventEmitter();
  77. /** The unique AccordionItem id. */
  78. id = inject(_IdGenerator).getId('cdk-accordion-child-');
  79. /** Whether the AccordionItem is expanded. */
  80. get expanded() {
  81. return this._expanded;
  82. }
  83. set expanded(expanded) {
  84. // Only emit events and update the internal value if the value changes.
  85. if (this._expanded !== expanded) {
  86. this._expanded = expanded;
  87. this.expandedChange.emit(expanded);
  88. if (expanded) {
  89. this.opened.emit();
  90. /**
  91. * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
  92. * the name value is the id of the accordion.
  93. */
  94. const accordionId = this.accordion ? this.accordion.id : this.id;
  95. this._expansionDispatcher.notify(this.id, accordionId);
  96. }
  97. else {
  98. this.closed.emit();
  99. }
  100. // Ensures that the animation will run when the value is set outside of an `@Input`.
  101. // This includes cases like the open, close and toggle methods.
  102. this._changeDetectorRef.markForCheck();
  103. }
  104. }
  105. _expanded = false;
  106. /** Whether the AccordionItem is disabled. */
  107. disabled = false;
  108. /** Unregister function for _expansionDispatcher. */
  109. _removeUniqueSelectionListener = () => { };
  110. constructor() { }
  111. ngOnInit() {
  112. this._removeUniqueSelectionListener = this._expansionDispatcher.listen((id, accordionId) => {
  113. if (this.accordion &&
  114. !this.accordion.multi &&
  115. this.accordion.id === accordionId &&
  116. this.id !== id) {
  117. this.expanded = false;
  118. }
  119. });
  120. // When an accordion item is hosted in an accordion, subscribe to open/close events.
  121. if (this.accordion) {
  122. this._openCloseAllSubscription = this._subscribeToOpenCloseAllActions();
  123. }
  124. }
  125. /** Emits an event for the accordion item being destroyed. */
  126. ngOnDestroy() {
  127. this.opened.complete();
  128. this.closed.complete();
  129. this.destroyed.emit();
  130. this.destroyed.complete();
  131. this._removeUniqueSelectionListener();
  132. this._openCloseAllSubscription.unsubscribe();
  133. }
  134. /** Toggles the expanded state of the accordion item. */
  135. toggle() {
  136. if (!this.disabled) {
  137. this.expanded = !this.expanded;
  138. }
  139. }
  140. /** Sets the expanded state of the accordion item to false. */
  141. close() {
  142. if (!this.disabled) {
  143. this.expanded = false;
  144. }
  145. }
  146. /** Sets the expanded state of the accordion item to true. */
  147. open() {
  148. if (!this.disabled) {
  149. this.expanded = true;
  150. }
  151. }
  152. _subscribeToOpenCloseAllActions() {
  153. return this.accordion._openCloseAllActions.subscribe(expanded => {
  154. // Only change expanded state if item is enabled
  155. if (!this.disabled) {
  156. this.expanded = expanded;
  157. }
  158. });
  159. }
  160. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  161. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.6", type: CdkAccordionItem, isStandalone: true, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", destroyed: "destroyed", expandedChange: "expandedChange" }, providers: [
  162. // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
  163. // registering to the same accordion.
  164. { provide: CDK_ACCORDION, useValue: undefined },
  165. ], exportAs: ["cdkAccordionItem"], ngImport: i0 });
  166. }
  167. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionItem, decorators: [{
  168. type: Directive,
  169. args: [{
  170. selector: 'cdk-accordion-item, [cdkAccordionItem]',
  171. exportAs: 'cdkAccordionItem',
  172. providers: [
  173. // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from
  174. // registering to the same accordion.
  175. { provide: CDK_ACCORDION, useValue: undefined },
  176. ],
  177. }]
  178. }], ctorParameters: () => [], propDecorators: { closed: [{
  179. type: Output
  180. }], opened: [{
  181. type: Output
  182. }], destroyed: [{
  183. type: Output
  184. }], expandedChange: [{
  185. type: Output
  186. }], expanded: [{
  187. type: Input,
  188. args: [{ transform: booleanAttribute }]
  189. }], disabled: [{
  190. type: Input,
  191. args: [{ transform: booleanAttribute }]
  192. }] } });
  193. class CdkAccordionModule {
  194. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  195. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionModule, imports: [CdkAccordion, CdkAccordionItem], exports: [CdkAccordion, CdkAccordionItem] });
  196. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionModule });
  197. }
  198. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkAccordionModule, decorators: [{
  199. type: NgModule,
  200. args: [{
  201. imports: [CdkAccordion, CdkAccordionItem],
  202. exports: [CdkAccordion, CdkAccordionItem],
  203. }]
  204. }] });
  205. export { CDK_ACCORDION, CdkAccordion, CdkAccordionItem, CdkAccordionModule };
  206. //# sourceMappingURL=accordion.mjs.map