ng-zorro-antd-collapse.mjs 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. import { __esDecorate, __runInitializers } from 'tslib';
  2. import * as i0 from '@angular/core';
  3. import { booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, inject, ViewChild, Output, NgModule } from '@angular/core';
  4. import { takeUntil, filter } from 'rxjs/operators';
  5. import { collapseMotion } from 'ng-zorro-antd/core/animation';
  6. import * as i1 from 'ng-zorro-antd/core/config';
  7. import { WithConfig } from 'ng-zorro-antd/core/config';
  8. import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
  9. import * as i3$1 from 'ng-zorro-antd/core/outlet';
  10. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  11. import * as i3 from 'ng-zorro-antd/core/services';
  12. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  13. import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
  14. import * as i4 from 'ng-zorro-antd/icon';
  15. import { NzIconModule } from 'ng-zorro-antd/icon';
  16. import * as i2 from '@angular/cdk/bidi';
  17. const NZ_CONFIG_MODULE_NAME$1 = 'collapse';
  18. let NzCollapseComponent = (() => {
  19. let _nzAccordion_decorators;
  20. let _nzAccordion_initializers = [];
  21. let _nzAccordion_extraInitializers = [];
  22. let _nzBordered_decorators;
  23. let _nzBordered_initializers = [];
  24. let _nzBordered_extraInitializers = [];
  25. let _nzGhost_decorators;
  26. let _nzGhost_initializers = [];
  27. let _nzGhost_extraInitializers = [];
  28. return class NzCollapseComponent {
  29. static {
  30. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  31. _nzAccordion_decorators = [WithConfig()];
  32. _nzBordered_decorators = [WithConfig()];
  33. _nzGhost_decorators = [WithConfig()];
  34. __esDecorate(null, null, _nzAccordion_decorators, { kind: "field", name: "nzAccordion", static: false, private: false, access: { has: obj => "nzAccordion" in obj, get: obj => obj.nzAccordion, set: (obj, value) => { obj.nzAccordion = value; } }, metadata: _metadata }, _nzAccordion_initializers, _nzAccordion_extraInitializers);
  35. __esDecorate(null, null, _nzBordered_decorators, { kind: "field", name: "nzBordered", static: false, private: false, access: { has: obj => "nzBordered" in obj, get: obj => obj.nzBordered, set: (obj, value) => { obj.nzBordered = value; } }, metadata: _metadata }, _nzBordered_initializers, _nzBordered_extraInitializers);
  36. __esDecorate(null, null, _nzGhost_decorators, { kind: "field", name: "nzGhost", static: false, private: false, access: { has: obj => "nzGhost" in obj, get: obj => obj.nzGhost, set: (obj, value) => { obj.nzGhost = value; } }, metadata: _metadata }, _nzGhost_initializers, _nzGhost_extraInitializers);
  37. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  38. }
  39. nzConfigService;
  40. cdr;
  41. directionality;
  42. destroy$;
  43. _nzModuleName = NZ_CONFIG_MODULE_NAME$1;
  44. nzAccordion = __runInitializers(this, _nzAccordion_initializers, false);
  45. nzBordered = (__runInitializers(this, _nzAccordion_extraInitializers), __runInitializers(this, _nzBordered_initializers, true));
  46. nzGhost = (__runInitializers(this, _nzBordered_extraInitializers), __runInitializers(this, _nzGhost_initializers, false));
  47. nzExpandIconPosition = (__runInitializers(this, _nzGhost_extraInitializers), 'start');
  48. dir = 'ltr';
  49. listOfNzCollapsePanelComponent = [];
  50. constructor(nzConfigService, cdr, directionality, destroy$) {
  51. this.nzConfigService = nzConfigService;
  52. this.cdr = cdr;
  53. this.directionality = directionality;
  54. this.destroy$ = destroy$;
  55. this.nzConfigService
  56. .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME$1)
  57. .pipe(takeUntil(this.destroy$))
  58. .subscribe(() => {
  59. this.cdr.markForCheck();
  60. });
  61. }
  62. ngOnInit() {
  63. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  64. this.dir = direction;
  65. this.cdr.detectChanges();
  66. });
  67. this.dir = this.directionality.value;
  68. }
  69. addPanel(value) {
  70. this.listOfNzCollapsePanelComponent.push(value);
  71. }
  72. removePanel(value) {
  73. this.listOfNzCollapsePanelComponent.splice(this.listOfNzCollapsePanelComponent.indexOf(value), 1);
  74. }
  75. click(collapse) {
  76. if (this.nzAccordion && !collapse.nzActive) {
  77. this.listOfNzCollapsePanelComponent
  78. .filter(item => item !== collapse)
  79. .forEach(item => {
  80. if (item.nzActive) {
  81. item.nzActive = false;
  82. item.nzActiveChange.emit(item.nzActive);
  83. item.markForCheck();
  84. }
  85. });
  86. }
  87. collapse.nzActive = !collapse.nzActive;
  88. collapse.nzActiveChange.emit(collapse.nzActive);
  89. }
  90. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseComponent, deps: [{ token: i1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality }, { token: i3.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  91. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzCollapseComponent, isStandalone: true, selector: "nz-collapse", inputs: { nzAccordion: ["nzAccordion", "nzAccordion", booleanAttribute], nzBordered: ["nzBordered", "nzBordered", booleanAttribute], nzGhost: ["nzGhost", "nzGhost", booleanAttribute], nzExpandIconPosition: "nzExpandIconPosition" }, host: { properties: { "class.ant-collapse-icon-position-start": "nzExpandIconPosition === 'start'", "class.ant-collapse-icon-position-end": "nzExpandIconPosition === 'end'", "class.ant-collapse-ghost": "nzGhost", "class.ant-collapse-borderless": "!nzBordered", "class.ant-collapse-rtl": "dir === 'rtl'" }, classAttribute: "ant-collapse" }, providers: [NzDestroyService], exportAs: ["nzCollapse"], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  92. };
  93. })();
  94. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseComponent, decorators: [{
  95. type: Component,
  96. args: [{
  97. selector: 'nz-collapse',
  98. exportAs: 'nzCollapse',
  99. changeDetection: ChangeDetectionStrategy.OnPush,
  100. encapsulation: ViewEncapsulation.None,
  101. template: ` <ng-content></ng-content> `,
  102. host: {
  103. class: 'ant-collapse',
  104. '[class.ant-collapse-icon-position-start]': `nzExpandIconPosition === 'start'`,
  105. '[class.ant-collapse-icon-position-end]': `nzExpandIconPosition === 'end'`,
  106. '[class.ant-collapse-ghost]': `nzGhost`,
  107. '[class.ant-collapse-borderless]': '!nzBordered',
  108. '[class.ant-collapse-rtl]': "dir === 'rtl'"
  109. },
  110. providers: [NzDestroyService]
  111. }]
  112. }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality }, { type: i3.NzDestroyService }], propDecorators: { nzAccordion: [{
  113. type: Input,
  114. args: [{ transform: booleanAttribute }]
  115. }], nzBordered: [{
  116. type: Input,
  117. args: [{ transform: booleanAttribute }]
  118. }], nzGhost: [{
  119. type: Input,
  120. args: [{ transform: booleanAttribute }]
  121. }], nzExpandIconPosition: [{
  122. type: Input
  123. }] } });
  124. const NZ_CONFIG_MODULE_NAME = 'collapsePanel';
  125. let NzCollapsePanelComponent = (() => {
  126. let _nzShowArrow_decorators;
  127. let _nzShowArrow_initializers = [];
  128. let _nzShowArrow_extraInitializers = [];
  129. return class NzCollapsePanelComponent {
  130. static {
  131. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  132. _nzShowArrow_decorators = [WithConfig()];
  133. __esDecorate(null, null, _nzShowArrow_decorators, { kind: "field", name: "nzShowArrow", static: false, private: false, access: { has: obj => "nzShowArrow" in obj, get: obj => obj.nzShowArrow, set: (obj, value) => { obj.nzShowArrow = value; } }, metadata: _metadata }, _nzShowArrow_initializers, _nzShowArrow_extraInitializers);
  134. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  135. }
  136. nzConfigService;
  137. ngZone;
  138. cdr;
  139. destroy$;
  140. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  141. nzActive = false;
  142. nzDisabled = false;
  143. nzShowArrow = __runInitializers(this, _nzShowArrow_initializers, true);
  144. nzExtra = __runInitializers(this, _nzShowArrow_extraInitializers);
  145. nzHeader;
  146. nzExpandedIcon;
  147. nzActiveChange = new EventEmitter();
  148. collapseHeader;
  149. markForCheck() {
  150. this.cdr.markForCheck();
  151. }
  152. nzCollapseComponent = inject(NzCollapseComponent, { host: true });
  153. noAnimation = inject(NzNoAnimationDirective, { optional: true });
  154. constructor(nzConfigService, ngZone, cdr, destroy$) {
  155. this.nzConfigService = nzConfigService;
  156. this.ngZone = ngZone;
  157. this.cdr = cdr;
  158. this.destroy$ = destroy$;
  159. this.nzConfigService
  160. .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
  161. .pipe(takeUntil(this.destroy$))
  162. .subscribe(() => {
  163. this.cdr.markForCheck();
  164. });
  165. }
  166. ngOnInit() {
  167. this.nzCollapseComponent.addPanel(this);
  168. fromEventOutsideAngular(this.collapseHeader.nativeElement, 'click')
  169. .pipe(filter(() => !this.nzDisabled), takeUntil(this.destroy$))
  170. .subscribe(() => {
  171. this.ngZone.run(() => {
  172. this.nzCollapseComponent.click(this);
  173. this.cdr.markForCheck();
  174. });
  175. });
  176. }
  177. ngOnDestroy() {
  178. this.nzCollapseComponent.removePanel(this);
  179. }
  180. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapsePanelComponent, deps: [{ token: i1.NzConfigService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  181. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzCollapsePanelComponent, isStandalone: true, selector: "nz-collapse-panel", inputs: { nzActive: ["nzActive", "nzActive", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzShowArrow: ["nzShowArrow", "nzShowArrow", booleanAttribute], nzExtra: "nzExtra", nzHeader: "nzHeader", nzExpandedIcon: "nzExpandedIcon" }, outputs: { nzActiveChange: "nzActiveChange" }, host: { properties: { "class.ant-collapse-no-arrow": "!nzShowArrow", "class.ant-collapse-item-active": "nzActive", "class.ant-collapse-item-disabled": "nzDisabled" }, classAttribute: "ant-collapse-item" }, providers: [NzDestroyService], viewQueries: [{ propertyName: "collapseHeader", first: true, predicate: ["collapseHeader"], descendants: true, static: true }], exportAs: ["nzCollapsePanel"], ngImport: i0, template: `
  182. <div #collapseHeader role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header">
  183. @if (nzShowArrow) {
  184. <div>
  185. <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
  186. <nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0" />
  187. </ng-container>
  188. </div>
  189. }
  190. <span class="ant-collapse-header-text">
  191. <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
  192. </span>
  193. @if (nzExtra) {
  194. <div class="ant-collapse-extra">
  195. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  196. </div>
  197. }
  198. </div>
  199. <div
  200. class="ant-collapse-content"
  201. [class.ant-collapse-content-active]="nzActive"
  202. [@.disabled]="!!noAnimation?.nzNoAnimation"
  203. [@collapseMotion]="nzActive ? 'expanded' : 'hidden'"
  204. >
  205. <div class="ant-collapse-content-box">
  206. <ng-content></ng-content>
  207. </div>
  208. </div>
  209. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i3$1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i4.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], animations: [collapseMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  210. };
  211. })();
  212. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapsePanelComponent, decorators: [{
  213. type: Component,
  214. args: [{
  215. selector: 'nz-collapse-panel',
  216. exportAs: 'nzCollapsePanel',
  217. changeDetection: ChangeDetectionStrategy.OnPush,
  218. encapsulation: ViewEncapsulation.None,
  219. animations: [collapseMotion],
  220. template: `
  221. <div #collapseHeader role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header">
  222. @if (nzShowArrow) {
  223. <div>
  224. <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
  225. <nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0" />
  226. </ng-container>
  227. </div>
  228. }
  229. <span class="ant-collapse-header-text">
  230. <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
  231. </span>
  232. @if (nzExtra) {
  233. <div class="ant-collapse-extra">
  234. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  235. </div>
  236. }
  237. </div>
  238. <div
  239. class="ant-collapse-content"
  240. [class.ant-collapse-content-active]="nzActive"
  241. [@.disabled]="!!noAnimation?.nzNoAnimation"
  242. [@collapseMotion]="nzActive ? 'expanded' : 'hidden'"
  243. >
  244. <div class="ant-collapse-content-box">
  245. <ng-content></ng-content>
  246. </div>
  247. </div>
  248. `,
  249. host: {
  250. class: 'ant-collapse-item',
  251. '[class.ant-collapse-no-arrow]': '!nzShowArrow',
  252. '[class.ant-collapse-item-active]': 'nzActive',
  253. '[class.ant-collapse-item-disabled]': 'nzDisabled'
  254. },
  255. providers: [NzDestroyService],
  256. imports: [NzOutletModule, NzIconModule]
  257. }]
  258. }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.NzDestroyService }], propDecorators: { nzActive: [{
  259. type: Input,
  260. args: [{ transform: booleanAttribute }]
  261. }], nzDisabled: [{
  262. type: Input,
  263. args: [{ transform: booleanAttribute }]
  264. }], nzShowArrow: [{
  265. type: Input,
  266. args: [{ transform: booleanAttribute }]
  267. }], nzExtra: [{
  268. type: Input
  269. }], nzHeader: [{
  270. type: Input
  271. }], nzExpandedIcon: [{
  272. type: Input
  273. }], nzActiveChange: [{
  274. type: Output
  275. }], collapseHeader: [{
  276. type: ViewChild,
  277. args: ['collapseHeader', { static: true }]
  278. }] } });
  279. /**
  280. * Use of this source code is governed by an MIT-style license that can be
  281. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  282. */
  283. class NzCollapseModule {
  284. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  285. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseModule, imports: [NzCollapsePanelComponent, NzCollapseComponent], exports: [NzCollapsePanelComponent, NzCollapseComponent] });
  286. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseModule, imports: [NzCollapsePanelComponent] });
  287. }
  288. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCollapseModule, decorators: [{
  289. type: NgModule,
  290. args: [{
  291. imports: [NzCollapsePanelComponent, NzCollapseComponent],
  292. exports: [NzCollapsePanelComponent, NzCollapseComponent]
  293. }]
  294. }] });
  295. /**
  296. * Use of this source code is governed by an MIT-style license that can be
  297. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  298. */
  299. /**
  300. * Generated bundle index. Do not edit.
  301. */
  302. export { NzCollapseComponent, NzCollapseModule, NzCollapsePanelComponent };
  303. //# sourceMappingURL=ng-zorro-antd-collapse.mjs.map