ng-zorro-antd-descriptions.mjs 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. import * as i0 from '@angular/core';
  2. import { TemplateRef, numberAttribute, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, ContentChildren, NgModule } from '@angular/core';
  3. import { Subject, merge } from 'rxjs';
  4. import { __esDecorate, __runInitializers } from 'tslib';
  5. import { NgTemplateOutlet } from '@angular/common';
  6. import { takeUntil, startWith, switchMap, auditTime, tap } from 'rxjs/operators';
  7. import * as i1 from 'ng-zorro-antd/core/config';
  8. import { WithConfig } from 'ng-zorro-antd/core/config';
  9. import { warn } from 'ng-zorro-antd/core/logger';
  10. import * as i4 from 'ng-zorro-antd/core/outlet';
  11. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  12. import * as i2 from 'ng-zorro-antd/core/services';
  13. import { NzBreakpointEnum, gridResponsiveMap } from 'ng-zorro-antd/core/services';
  14. import * as i3 from '@angular/cdk/bidi';
  15. /**
  16. * Use of this source code is governed by an MIT-style license that can be
  17. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  18. */
  19. class NzDescriptionsItemComponent {
  20. content;
  21. nzSpan = 1;
  22. nzTitle = '';
  23. inputChange$ = new Subject();
  24. ngOnChanges() {
  25. this.inputChange$.next();
  26. }
  27. ngOnDestroy() {
  28. this.inputChange$.complete();
  29. }
  30. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  31. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzDescriptionsItemComponent, isStandalone: true, selector: "nz-descriptions-item", inputs: { nzSpan: ["nzSpan", "nzSpan", numberAttribute], nzTitle: "nzTitle" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["nzDescriptionsItem"], usesOnChanges: true, ngImport: i0, template: `
  32. <ng-template>
  33. <ng-content></ng-content>
  34. </ng-template>
  35. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  36. }
  37. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsItemComponent, decorators: [{
  38. type: Component,
  39. args: [{
  40. changeDetection: ChangeDetectionStrategy.OnPush,
  41. encapsulation: ViewEncapsulation.None,
  42. selector: 'nz-descriptions-item',
  43. template: `
  44. <ng-template>
  45. <ng-content></ng-content>
  46. </ng-template>
  47. `,
  48. exportAs: 'nzDescriptionsItem',
  49. preserveWhitespaces: false
  50. }]
  51. }], propDecorators: { content: [{
  52. type: ViewChild,
  53. args: [TemplateRef, { static: true }]
  54. }], nzSpan: [{
  55. type: Input,
  56. args: [{ transform: numberAttribute }]
  57. }], nzTitle: [{
  58. type: Input
  59. }] } });
  60. const NZ_CONFIG_MODULE_NAME = 'descriptions';
  61. const defaultColumnMap = {
  62. xxl: 3,
  63. xl: 3,
  64. lg: 3,
  65. md: 3,
  66. sm: 2,
  67. xs: 1
  68. };
  69. let NzDescriptionsComponent = (() => {
  70. let _nzBordered_decorators;
  71. let _nzBordered_initializers = [];
  72. let _nzBordered_extraInitializers = [];
  73. let _nzColumn_decorators;
  74. let _nzColumn_initializers = [];
  75. let _nzColumn_extraInitializers = [];
  76. let _nzSize_decorators;
  77. let _nzSize_initializers = [];
  78. let _nzSize_extraInitializers = [];
  79. let _nzColon_decorators;
  80. let _nzColon_initializers = [];
  81. let _nzColon_extraInitializers = [];
  82. return class NzDescriptionsComponent {
  83. static {
  84. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  85. _nzBordered_decorators = [WithConfig()];
  86. _nzColumn_decorators = [WithConfig()];
  87. _nzSize_decorators = [WithConfig()];
  88. _nzColon_decorators = [WithConfig()];
  89. __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);
  90. __esDecorate(null, null, _nzColumn_decorators, { kind: "field", name: "nzColumn", static: false, private: false, access: { has: obj => "nzColumn" in obj, get: obj => obj.nzColumn, set: (obj, value) => { obj.nzColumn = value; } }, metadata: _metadata }, _nzColumn_initializers, _nzColumn_extraInitializers);
  91. __esDecorate(null, null, _nzSize_decorators, { kind: "field", name: "nzSize", static: false, private: false, access: { has: obj => "nzSize" in obj, get: obj => obj.nzSize, set: (obj, value) => { obj.nzSize = value; } }, metadata: _metadata }, _nzSize_initializers, _nzSize_extraInitializers);
  92. __esDecorate(null, null, _nzColon_decorators, { kind: "field", name: "nzColon", static: false, private: false, access: { has: obj => "nzColon" in obj, get: obj => obj.nzColon, set: (obj, value) => { obj.nzColon = value; } }, metadata: _metadata }, _nzColon_initializers, _nzColon_extraInitializers);
  93. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  94. }
  95. nzConfigService;
  96. cdr;
  97. breakpointService;
  98. directionality;
  99. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  100. items;
  101. nzBordered = __runInitializers(this, _nzBordered_initializers, false);
  102. nzLayout = (__runInitializers(this, _nzBordered_extraInitializers), 'horizontal');
  103. nzColumn = __runInitializers(this, _nzColumn_initializers, defaultColumnMap);
  104. nzSize = (__runInitializers(this, _nzColumn_extraInitializers), __runInitializers(this, _nzSize_initializers, 'default'));
  105. nzTitle = (__runInitializers(this, _nzSize_extraInitializers), '');
  106. nzExtra;
  107. nzColon = __runInitializers(this, _nzColon_initializers, true);
  108. itemMatrix = (__runInitializers(this, _nzColon_extraInitializers), []);
  109. realColumn = 3;
  110. dir = 'ltr';
  111. breakpoint = NzBreakpointEnum.md;
  112. destroy$ = new Subject();
  113. constructor(nzConfigService, cdr, breakpointService, directionality) {
  114. this.nzConfigService = nzConfigService;
  115. this.cdr = cdr;
  116. this.breakpointService = breakpointService;
  117. this.directionality = directionality;
  118. }
  119. ngOnInit() {
  120. this.dir = this.directionality.value;
  121. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  122. this.dir = direction;
  123. });
  124. }
  125. ngOnChanges(changes) {
  126. if (changes.nzColumn) {
  127. this.prepareMatrix();
  128. }
  129. }
  130. ngAfterContentInit() {
  131. const contentChange$ = this.items.changes.pipe(startWith(this.items), takeUntil(this.destroy$));
  132. merge(contentChange$, contentChange$.pipe(switchMap(() => merge(...this.items.map(i => i.inputChange$)).pipe(auditTime(16)))), this.breakpointService.subscribe(gridResponsiveMap).pipe(tap(bp => (this.breakpoint = bp))))
  133. .pipe(takeUntil(this.destroy$))
  134. .subscribe(() => {
  135. this.prepareMatrix();
  136. this.cdr.markForCheck();
  137. });
  138. }
  139. ngOnDestroy() {
  140. this.destroy$.next();
  141. this.destroy$.complete();
  142. }
  143. /**
  144. * Prepare the render matrix according to description items' spans.
  145. */
  146. prepareMatrix() {
  147. if (!this.items) {
  148. return;
  149. }
  150. let currentRow = [];
  151. let width = 0;
  152. const column = (this.realColumn = this.getColumn());
  153. const items = this.items.toArray();
  154. const length = items.length;
  155. const matrix = [];
  156. const flushRow = () => {
  157. matrix.push(currentRow);
  158. currentRow = [];
  159. width = 0;
  160. };
  161. for (let i = 0; i < length; i++) {
  162. const item = items[i];
  163. const { nzTitle: title, content, nzSpan: span } = item;
  164. width += span;
  165. // If the last item make the row's length exceeds `nzColumn`, the last
  166. // item should take all the space left. This logic is implemented in the template.
  167. // Warn user about that.
  168. if (width >= column) {
  169. if (width > column) {
  170. warn(`"nzColumn" is ${column} but we have row length ${width}`);
  171. }
  172. currentRow.push({ title, content, span: column - (width - span) });
  173. flushRow();
  174. }
  175. else if (i === length - 1) {
  176. currentRow.push({ title, content, span: column - (width - span) });
  177. flushRow();
  178. }
  179. else {
  180. currentRow.push({ title, content, span });
  181. }
  182. }
  183. this.itemMatrix = matrix;
  184. }
  185. getColumn() {
  186. if (typeof this.nzColumn !== 'number') {
  187. return this.nzColumn[this.breakpoint];
  188. }
  189. return this.nzColumn;
  190. }
  191. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsComponent, deps: [{ token: i1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.NzBreakpointService }, { token: i3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  192. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzDescriptionsComponent, isStandalone: true, selector: "nz-descriptions", inputs: { nzBordered: ["nzBordered", "nzBordered", booleanAttribute], nzLayout: "nzLayout", nzColumn: "nzColumn", nzSize: "nzSize", nzTitle: "nzTitle", nzExtra: "nzExtra", nzColon: ["nzColon", "nzColon", booleanAttribute] }, host: { properties: { "class.ant-descriptions-bordered": "nzBordered", "class.ant-descriptions-middle": "nzSize === \"middle\"", "class.ant-descriptions-small": "nzSize === \"small\"", "class.ant-descriptions-rtl": "dir === \"rtl\"" }, classAttribute: "ant-descriptions" }, queries: [{ propertyName: "items", predicate: NzDescriptionsItemComponent }], exportAs: ["nzDescriptions"], usesOnChanges: true, ngImport: i0, template: `
  193. @if (nzTitle || nzExtra) {
  194. <div class="ant-descriptions-header">
  195. @if (nzTitle) {
  196. <div class="ant-descriptions-title">
  197. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  198. </div>
  199. }
  200. @if (nzExtra) {
  201. <div class="ant-descriptions-extra">
  202. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  203. </div>
  204. }
  205. </div>
  206. }
  207. <div class="ant-descriptions-view">
  208. <table>
  209. <tbody>
  210. @if (nzLayout === 'horizontal') {
  211. @for (row of itemMatrix; track row; let i = $index) {
  212. <tr class="ant-descriptions-row">
  213. @for (item of row; track item; let isLast = $last) {
  214. @if (!nzBordered) {
  215. <td class="ant-descriptions-item" [colSpan]="item.span">
  216. <div class="ant-descriptions-item-container">
  217. <span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
  218. <ng-container *nzStringTemplateOutlet="item.title">
  219. {{ item.title }}
  220. </ng-container>
  221. </span>
  222. <span class="ant-descriptions-item-content">
  223. <ng-template [ngTemplateOutlet]="item.content"></ng-template>
  224. </span>
  225. </div>
  226. </td>
  227. } @else {
  228. <td class="ant-descriptions-item-label">
  229. <ng-container *nzStringTemplateOutlet="item.title">
  230. {{ item.title }}
  231. </ng-container>
  232. </td>
  233. <td class="ant-descriptions-item-content" [colSpan]="item.span * 2 - 1">
  234. <ng-template [ngTemplateOutlet]="item.content"></ng-template>
  235. </td>
  236. }
  237. }
  238. </tr>
  239. }
  240. }
  241. @if (nzLayout === 'vertical') {
  242. @if (!nzBordered) {
  243. @for (row of itemMatrix; track row; let i = $index) {
  244. <tr class="ant-descriptions-row">
  245. @for (item of row; track item; let isLast = $last) {
  246. <td class="ant-descriptions-item" [colSpan]="item.span">
  247. <div class="ant-descriptions-item-container">
  248. <span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
  249. <ng-container *nzStringTemplateOutlet="item.title">
  250. {{ item.title }}
  251. </ng-container>
  252. </span>
  253. </div>
  254. </td>
  255. }
  256. </tr>
  257. <tr class="ant-descriptions-row">
  258. @for (item of row; track item; let isLast = $last) {
  259. <td class="ant-descriptions-item" [colSpan]="item.span">
  260. <div class="ant-descriptions-item-container">
  261. <span class="ant-descriptions-item-content">
  262. <ng-template [ngTemplateOutlet]="item.content" />
  263. </span>
  264. </div>
  265. </td>
  266. }
  267. </tr>
  268. }
  269. } @else {
  270. @for (row of itemMatrix; track row; let i = $index) {
  271. <tr class="ant-descriptions-row">
  272. @for (item of row; track item; let isLast = $last) {
  273. <td class="ant-descriptions-item-label" [colSpan]="item.span">
  274. <ng-container *nzStringTemplateOutlet="item.title">
  275. {{ item.title }}
  276. </ng-container>
  277. </td>
  278. }
  279. </tr>
  280. <tr class="ant-descriptions-row">
  281. @for (item of row; track item; let isLast = $last) {
  282. <td class="ant-descriptions-item-content" [colSpan]="item.span">
  283. <ng-template [ngTemplateOutlet]="item.content" />
  284. </td>
  285. }
  286. </tr>
  287. }
  288. }
  289. }
  290. </tbody>
  291. </table>
  292. </div>
  293. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i4.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  294. };
  295. })();
  296. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsComponent, decorators: [{
  297. type: Component,
  298. args: [{
  299. changeDetection: ChangeDetectionStrategy.OnPush,
  300. encapsulation: ViewEncapsulation.None,
  301. selector: 'nz-descriptions',
  302. exportAs: 'nzDescriptions',
  303. preserveWhitespaces: false,
  304. template: `
  305. @if (nzTitle || nzExtra) {
  306. <div class="ant-descriptions-header">
  307. @if (nzTitle) {
  308. <div class="ant-descriptions-title">
  309. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  310. </div>
  311. }
  312. @if (nzExtra) {
  313. <div class="ant-descriptions-extra">
  314. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  315. </div>
  316. }
  317. </div>
  318. }
  319. <div class="ant-descriptions-view">
  320. <table>
  321. <tbody>
  322. @if (nzLayout === 'horizontal') {
  323. @for (row of itemMatrix; track row; let i = $index) {
  324. <tr class="ant-descriptions-row">
  325. @for (item of row; track item; let isLast = $last) {
  326. @if (!nzBordered) {
  327. <td class="ant-descriptions-item" [colSpan]="item.span">
  328. <div class="ant-descriptions-item-container">
  329. <span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
  330. <ng-container *nzStringTemplateOutlet="item.title">
  331. {{ item.title }}
  332. </ng-container>
  333. </span>
  334. <span class="ant-descriptions-item-content">
  335. <ng-template [ngTemplateOutlet]="item.content"></ng-template>
  336. </span>
  337. </div>
  338. </td>
  339. } @else {
  340. <td class="ant-descriptions-item-label">
  341. <ng-container *nzStringTemplateOutlet="item.title">
  342. {{ item.title }}
  343. </ng-container>
  344. </td>
  345. <td class="ant-descriptions-item-content" [colSpan]="item.span * 2 - 1">
  346. <ng-template [ngTemplateOutlet]="item.content"></ng-template>
  347. </td>
  348. }
  349. }
  350. </tr>
  351. }
  352. }
  353. @if (nzLayout === 'vertical') {
  354. @if (!nzBordered) {
  355. @for (row of itemMatrix; track row; let i = $index) {
  356. <tr class="ant-descriptions-row">
  357. @for (item of row; track item; let isLast = $last) {
  358. <td class="ant-descriptions-item" [colSpan]="item.span">
  359. <div class="ant-descriptions-item-container">
  360. <span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
  361. <ng-container *nzStringTemplateOutlet="item.title">
  362. {{ item.title }}
  363. </ng-container>
  364. </span>
  365. </div>
  366. </td>
  367. }
  368. </tr>
  369. <tr class="ant-descriptions-row">
  370. @for (item of row; track item; let isLast = $last) {
  371. <td class="ant-descriptions-item" [colSpan]="item.span">
  372. <div class="ant-descriptions-item-container">
  373. <span class="ant-descriptions-item-content">
  374. <ng-template [ngTemplateOutlet]="item.content" />
  375. </span>
  376. </div>
  377. </td>
  378. }
  379. </tr>
  380. }
  381. } @else {
  382. @for (row of itemMatrix; track row; let i = $index) {
  383. <tr class="ant-descriptions-row">
  384. @for (item of row; track item; let isLast = $last) {
  385. <td class="ant-descriptions-item-label" [colSpan]="item.span">
  386. <ng-container *nzStringTemplateOutlet="item.title">
  387. {{ item.title }}
  388. </ng-container>
  389. </td>
  390. }
  391. </tr>
  392. <tr class="ant-descriptions-row">
  393. @for (item of row; track item; let isLast = $last) {
  394. <td class="ant-descriptions-item-content" [colSpan]="item.span">
  395. <ng-template [ngTemplateOutlet]="item.content" />
  396. </td>
  397. }
  398. </tr>
  399. }
  400. }
  401. }
  402. </tbody>
  403. </table>
  404. </div>
  405. `,
  406. host: {
  407. class: 'ant-descriptions',
  408. '[class.ant-descriptions-bordered]': 'nzBordered',
  409. '[class.ant-descriptions-middle]': 'nzSize === "middle"',
  410. '[class.ant-descriptions-small]': 'nzSize === "small"',
  411. '[class.ant-descriptions-rtl]': 'dir === "rtl"'
  412. },
  413. imports: [NzOutletModule, NgTemplateOutlet]
  414. }]
  415. }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.NzBreakpointService }, { type: i3.Directionality }], propDecorators: { items: [{
  416. type: ContentChildren,
  417. args: [NzDescriptionsItemComponent]
  418. }], nzBordered: [{
  419. type: Input,
  420. args: [{ transform: booleanAttribute }]
  421. }], nzLayout: [{
  422. type: Input
  423. }], nzColumn: [{
  424. type: Input
  425. }], nzSize: [{
  426. type: Input
  427. }], nzTitle: [{
  428. type: Input
  429. }], nzExtra: [{
  430. type: Input
  431. }], nzColon: [{
  432. type: Input,
  433. args: [{ transform: booleanAttribute }]
  434. }] } });
  435. /**
  436. * Use of this source code is governed by an MIT-style license that can be
  437. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  438. */
  439. class NzDescriptionsModule {
  440. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  441. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsModule, imports: [NzDescriptionsComponent, NzDescriptionsItemComponent], exports: [NzDescriptionsComponent, NzDescriptionsItemComponent] });
  442. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsModule, imports: [NzDescriptionsComponent] });
  443. }
  444. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzDescriptionsModule, decorators: [{
  445. type: NgModule,
  446. args: [{
  447. imports: [NzDescriptionsComponent, NzDescriptionsItemComponent],
  448. exports: [NzDescriptionsComponent, NzDescriptionsItemComponent]
  449. }]
  450. }] });
  451. /**
  452. * Use of this source code is governed by an MIT-style license that can be
  453. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  454. */
  455. /**
  456. * Use of this source code is governed by an MIT-style license that can be
  457. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  458. */
  459. /**
  460. * Generated bundle index. Do not edit.
  461. */
  462. export { NzDescriptionsComponent, NzDescriptionsItemComponent, NzDescriptionsModule };
  463. //# sourceMappingURL=ng-zorro-antd-descriptions.mjs.map