material-table.umd.js 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/table'), require('@angular/core'), require('@angular/common'), require('@angular/material/core'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/table', ['exports', '@angular/cdk/table', '@angular/core', '@angular/common', '@angular/material/core', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.table = {}),global.ng.cdk.table,global.ng.core,global.ng.common,global.ng.material.core,global.ng.cdk.coercion,global.rxjs,global.rxjs.operators));
  12. }(this, (function (exports,table,core,common,core$1,coercion,rxjs,operators) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. /**
  42. * Wrapper for the CdkTable with Material design styles.
  43. * @template T
  44. */
  45. var MatTable = /** @class */ (function (_super) {
  46. __extends(MatTable, _super);
  47. function MatTable() {
  48. var _this = _super !== null && _super.apply(this, arguments) || this;
  49. /**
  50. * Overrides the sticky CSS class set by the `CdkTable`.
  51. */
  52. _this.stickyCssClass = 'mat-table-sticky';
  53. return _this;
  54. }
  55. MatTable.decorators = [
  56. { type: core.Component, args: [{selector: 'mat-table, table[mat-table]',
  57. exportAs: 'matTable',
  58. template: table.CDK_TABLE_TEMPLATE,
  59. styles: ["mat-table{display:block}mat-header-row{min-height:56px}mat-footer-row,mat-row{min-height:48px}mat-footer-row,mat-header-row,mat-row{display:flex;border-width:0;border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}mat-footer-row::after,mat-header-row::after,mat-row::after{display:inline-block;min-height:inherit;content:''}mat-cell:first-of-type,mat-footer-cell:first-of-type,mat-header-cell:first-of-type{padding-left:24px}[dir=rtl] mat-cell:first-of-type,[dir=rtl] mat-footer-cell:first-of-type,[dir=rtl] mat-header-cell:first-of-type{padding-left:0;padding-right:24px}mat-cell:last-of-type,mat-footer-cell:last-of-type,mat-header-cell:last-of-type{padding-right:24px}[dir=rtl] mat-cell:last-of-type,[dir=rtl] mat-footer-cell:last-of-type,[dir=rtl] mat-header-cell:last-of-type{padding-right:0;padding-left:24px}mat-cell,mat-footer-cell,mat-header-cell{flex:1;display:flex;align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit}table.mat-table{border-spacing:0}tr.mat-header-row{height:56px}tr.mat-footer-row,tr.mat-row{height:48px}th.mat-header-cell{text-align:left}[dir=rtl] th.mat-header-cell{text-align:right}td.mat-cell,td.mat-footer-cell,th.mat-header-cell{padding:0;border-bottom-width:1px;border-bottom-style:solid}td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type,th.mat-header-cell:first-of-type{padding-left:24px}[dir=rtl] td.mat-cell:first-of-type,[dir=rtl] td.mat-footer-cell:first-of-type,[dir=rtl] th.mat-header-cell:first-of-type{padding-left:0;padding-right:24px}td.mat-cell:last-of-type,td.mat-footer-cell:last-of-type,th.mat-header-cell:last-of-type{padding-right:24px}[dir=rtl] td.mat-cell:last-of-type,[dir=rtl] td.mat-footer-cell:last-of-type,[dir=rtl] th.mat-header-cell:last-of-type{padding-right:0;padding-left:24px}"],
  60. host: {
  61. 'class': 'mat-table',
  62. },
  63. providers: [{ provide: table.CdkTable, useExisting: MatTable }],
  64. encapsulation: core.ViewEncapsulation.None,
  65. // See note on CdkTable for explanation on why this uses the default change detection strategy.
  66. // tslint:disable-next-line:validate-decorators
  67. changeDetection: core.ChangeDetectionStrategy.Default,
  68. },] },
  69. ];
  70. return MatTable;
  71. }(table.CdkTable));
  72. /**
  73. * @fileoverview added by tsickle
  74. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  75. */
  76. /**
  77. * Cell definition for the mat-table.
  78. * Captures the template of a column's data row cell as well as cell-specific properties.
  79. */
  80. var MatCellDef = /** @class */ (function (_super) {
  81. __extends(MatCellDef, _super);
  82. function MatCellDef() {
  83. return _super !== null && _super.apply(this, arguments) || this;
  84. }
  85. MatCellDef.decorators = [
  86. { type: core.Directive, args: [{
  87. selector: '[matCellDef]',
  88. providers: [{ provide: table.CdkCellDef, useExisting: MatCellDef }]
  89. },] },
  90. ];
  91. return MatCellDef;
  92. }(table.CdkCellDef));
  93. /**
  94. * Header cell definition for the mat-table.
  95. * Captures the template of a column's header cell and as well as cell-specific properties.
  96. */
  97. var MatHeaderCellDef = /** @class */ (function (_super) {
  98. __extends(MatHeaderCellDef, _super);
  99. function MatHeaderCellDef() {
  100. return _super !== null && _super.apply(this, arguments) || this;
  101. }
  102. MatHeaderCellDef.decorators = [
  103. { type: core.Directive, args: [{
  104. selector: '[matHeaderCellDef]',
  105. providers: [{ provide: table.CdkHeaderCellDef, useExisting: MatHeaderCellDef }]
  106. },] },
  107. ];
  108. return MatHeaderCellDef;
  109. }(table.CdkHeaderCellDef));
  110. /**
  111. * Footer cell definition for the mat-table.
  112. * Captures the template of a column's footer cell and as well as cell-specific properties.
  113. */
  114. var MatFooterCellDef = /** @class */ (function (_super) {
  115. __extends(MatFooterCellDef, _super);
  116. function MatFooterCellDef() {
  117. return _super !== null && _super.apply(this, arguments) || this;
  118. }
  119. MatFooterCellDef.decorators = [
  120. { type: core.Directive, args: [{
  121. selector: '[matFooterCellDef]',
  122. providers: [{ provide: table.CdkFooterCellDef, useExisting: MatFooterCellDef }]
  123. },] },
  124. ];
  125. return MatFooterCellDef;
  126. }(table.CdkFooterCellDef));
  127. /**
  128. * Column definition for the mat-table.
  129. * Defines a set of cells available for a table column.
  130. */
  131. var MatColumnDef = /** @class */ (function (_super) {
  132. __extends(MatColumnDef, _super);
  133. function MatColumnDef() {
  134. return _super !== null && _super.apply(this, arguments) || this;
  135. }
  136. MatColumnDef.decorators = [
  137. { type: core.Directive, args: [{
  138. selector: '[matColumnDef]',
  139. providers: [
  140. { provide: table.CdkColumnDef, useExisting: MatColumnDef },
  141. { provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef }
  142. ],
  143. },] },
  144. ];
  145. MatColumnDef.propDecorators = {
  146. name: [{ type: core.Input, args: ['matColumnDef',] }],
  147. sticky: [{ type: core.Input }],
  148. stickyEnd: [{ type: core.Input }]
  149. };
  150. return MatColumnDef;
  151. }(table.CdkColumnDef));
  152. /**
  153. * Header cell template container that adds the right classes and role.
  154. */
  155. var MatHeaderCell = /** @class */ (function (_super) {
  156. __extends(MatHeaderCell, _super);
  157. function MatHeaderCell(columnDef, elementRef) {
  158. var _this = _super.call(this, columnDef, elementRef) || this;
  159. elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName);
  160. return _this;
  161. }
  162. MatHeaderCell.decorators = [
  163. { type: core.Directive, args: [{
  164. selector: 'mat-header-cell, th[mat-header-cell]',
  165. host: {
  166. 'class': 'mat-header-cell',
  167. 'role': 'columnheader',
  168. },
  169. },] },
  170. ];
  171. /** @nocollapse */
  172. MatHeaderCell.ctorParameters = function () { return [
  173. { type: table.CdkColumnDef },
  174. { type: core.ElementRef }
  175. ]; };
  176. return MatHeaderCell;
  177. }(table.CdkHeaderCell));
  178. /**
  179. * Footer cell template container that adds the right classes and role.
  180. */
  181. var MatFooterCell = /** @class */ (function (_super) {
  182. __extends(MatFooterCell, _super);
  183. function MatFooterCell(columnDef, elementRef) {
  184. var _this = _super.call(this, columnDef, elementRef) || this;
  185. elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName);
  186. return _this;
  187. }
  188. MatFooterCell.decorators = [
  189. { type: core.Directive, args: [{
  190. selector: 'mat-footer-cell, td[mat-footer-cell]',
  191. host: {
  192. 'class': 'mat-footer-cell',
  193. 'role': 'gridcell',
  194. },
  195. },] },
  196. ];
  197. /** @nocollapse */
  198. MatFooterCell.ctorParameters = function () { return [
  199. { type: table.CdkColumnDef },
  200. { type: core.ElementRef }
  201. ]; };
  202. return MatFooterCell;
  203. }(table.CdkFooterCell));
  204. /**
  205. * Cell template container that adds the right classes and role.
  206. */
  207. var MatCell = /** @class */ (function (_super) {
  208. __extends(MatCell, _super);
  209. function MatCell(columnDef, elementRef) {
  210. var _this = _super.call(this, columnDef, elementRef) || this;
  211. elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName);
  212. return _this;
  213. }
  214. MatCell.decorators = [
  215. { type: core.Directive, args: [{
  216. selector: 'mat-cell, td[mat-cell]',
  217. host: {
  218. 'class': 'mat-cell',
  219. 'role': 'gridcell',
  220. },
  221. },] },
  222. ];
  223. /** @nocollapse */
  224. MatCell.ctorParameters = function () { return [
  225. { type: table.CdkColumnDef },
  226. { type: core.ElementRef }
  227. ]; };
  228. return MatCell;
  229. }(table.CdkCell));
  230. /**
  231. * @fileoverview added by tsickle
  232. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  233. */
  234. /**
  235. * Header row definition for the mat-table.
  236. * Captures the header row's template and other header properties such as the columns to display.
  237. */
  238. var MatHeaderRowDef = /** @class */ (function (_super) {
  239. __extends(MatHeaderRowDef, _super);
  240. function MatHeaderRowDef() {
  241. return _super !== null && _super.apply(this, arguments) || this;
  242. }
  243. MatHeaderRowDef.decorators = [
  244. { type: core.Directive, args: [{
  245. selector: '[matHeaderRowDef]',
  246. providers: [{ provide: table.CdkHeaderRowDef, useExisting: MatHeaderRowDef }],
  247. inputs: ['columns: matHeaderRowDef', 'sticky: matHeaderRowDefSticky'],
  248. },] },
  249. ];
  250. return MatHeaderRowDef;
  251. }(table.CdkHeaderRowDef));
  252. /**
  253. * Footer row definition for the mat-table.
  254. * Captures the footer row's template and other footer properties such as the columns to display.
  255. */
  256. var MatFooterRowDef = /** @class */ (function (_super) {
  257. __extends(MatFooterRowDef, _super);
  258. function MatFooterRowDef() {
  259. return _super !== null && _super.apply(this, arguments) || this;
  260. }
  261. MatFooterRowDef.decorators = [
  262. { type: core.Directive, args: [{
  263. selector: '[matFooterRowDef]',
  264. providers: [{ provide: table.CdkFooterRowDef, useExisting: MatFooterRowDef }],
  265. inputs: ['columns: matFooterRowDef', 'sticky: matFooterRowDefSticky'],
  266. },] },
  267. ];
  268. return MatFooterRowDef;
  269. }(table.CdkFooterRowDef));
  270. /**
  271. * Data row definition for the mat-table.
  272. * Captures the data row's template and other properties such as the columns to display and
  273. * a when predicate that describes when this row should be used.
  274. * @template T
  275. */
  276. var MatRowDef = /** @class */ (function (_super) {
  277. __extends(MatRowDef, _super);
  278. function MatRowDef() {
  279. return _super !== null && _super.apply(this, arguments) || this;
  280. }
  281. MatRowDef.decorators = [
  282. { type: core.Directive, args: [{
  283. selector: '[matRowDef]',
  284. providers: [{ provide: table.CdkRowDef, useExisting: MatRowDef }],
  285. inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'],
  286. },] },
  287. ];
  288. return MatRowDef;
  289. }(table.CdkRowDef));
  290. /**
  291. * Footer template container that contains the cell outlet. Adds the right class and role.
  292. */
  293. var MatHeaderRow = /** @class */ (function (_super) {
  294. __extends(MatHeaderRow, _super);
  295. function MatHeaderRow() {
  296. return _super !== null && _super.apply(this, arguments) || this;
  297. }
  298. MatHeaderRow.decorators = [
  299. { type: core.Component, args: [{selector: 'mat-header-row, tr[mat-header-row]',
  300. template: table.CDK_ROW_TEMPLATE,
  301. host: {
  302. 'class': 'mat-header-row',
  303. 'role': 'row',
  304. },
  305. // See note on CdkTable for explanation on why this uses the default change detection strategy.
  306. // tslint:disable-next-line:validate-decorators
  307. changeDetection: core.ChangeDetectionStrategy.Default,
  308. encapsulation: core.ViewEncapsulation.None,
  309. exportAs: 'matHeaderRow',
  310. providers: [{ provide: table.CdkHeaderRow, useExisting: MatHeaderRow }],
  311. },] },
  312. ];
  313. return MatHeaderRow;
  314. }(table.CdkHeaderRow));
  315. /**
  316. * Footer template container that contains the cell outlet. Adds the right class and role.
  317. */
  318. var MatFooterRow = /** @class */ (function (_super) {
  319. __extends(MatFooterRow, _super);
  320. function MatFooterRow() {
  321. return _super !== null && _super.apply(this, arguments) || this;
  322. }
  323. MatFooterRow.decorators = [
  324. { type: core.Component, args: [{selector: 'mat-footer-row, tr[mat-footer-row]',
  325. template: table.CDK_ROW_TEMPLATE,
  326. host: {
  327. 'class': 'mat-footer-row',
  328. 'role': 'row',
  329. },
  330. // See note on CdkTable for explanation on why this uses the default change detection strategy.
  331. // tslint:disable-next-line:validate-decorators
  332. changeDetection: core.ChangeDetectionStrategy.Default,
  333. encapsulation: core.ViewEncapsulation.None,
  334. exportAs: 'matFooterRow',
  335. providers: [{ provide: table.CdkFooterRow, useExisting: MatFooterRow }],
  336. },] },
  337. ];
  338. return MatFooterRow;
  339. }(table.CdkFooterRow));
  340. /**
  341. * Data row template container that contains the cell outlet. Adds the right class and role.
  342. */
  343. var MatRow = /** @class */ (function (_super) {
  344. __extends(MatRow, _super);
  345. function MatRow() {
  346. return _super !== null && _super.apply(this, arguments) || this;
  347. }
  348. MatRow.decorators = [
  349. { type: core.Component, args: [{selector: 'mat-row, tr[mat-row]',
  350. template: table.CDK_ROW_TEMPLATE,
  351. host: {
  352. 'class': 'mat-row',
  353. 'role': 'row',
  354. },
  355. // See note on CdkTable for explanation on why this uses the default change detection strategy.
  356. // tslint:disable-next-line:validate-decorators
  357. changeDetection: core.ChangeDetectionStrategy.Default,
  358. encapsulation: core.ViewEncapsulation.None,
  359. exportAs: 'matRow',
  360. providers: [{ provide: table.CdkRow, useExisting: MatRow }],
  361. },] },
  362. ];
  363. return MatRow;
  364. }(table.CdkRow));
  365. /**
  366. * @fileoverview added by tsickle
  367. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  368. */
  369. /**
  370. * Column that simply shows text content for the header and row cells. Assumes that the table
  371. * is using the native table implementation (`<table>`).
  372. *
  373. * By default, the name of this column will be the header text and data property accessor.
  374. * The header text can be overridden with the `headerText` input. Cell values can be overridden with
  375. * the `dataAccessor` input. Change the text justification to the start or end using the `justify`
  376. * input.
  377. * @template T
  378. */
  379. var MatTextColumn = /** @class */ (function (_super) {
  380. __extends(MatTextColumn, _super);
  381. function MatTextColumn() {
  382. return _super !== null && _super.apply(this, arguments) || this;
  383. }
  384. MatTextColumn.decorators = [
  385. { type: core.Component, args: [{selector: 'mat-text-column',
  386. template: "\n <ng-container matColumnDef>\n <th mat-header-cell *matHeaderCellDef [style.text-align]=\"justify\">\n {{headerText}}\n </th>\n <td mat-cell *matCellDef=\"let data\" [style.text-align]=\"justify\">\n {{dataAccessor(data, name)}}\n </td>\n </ng-container>\n ",
  387. encapsulation: core.ViewEncapsulation.None,
  388. // Change detection is intentionally not set to OnPush. This component's template will be provided
  389. // to the table to be inserted into its view. This is problematic when change detection runs since
  390. // the bindings in this template will be evaluated _after_ the table's view is evaluated, which
  391. // mean's the template in the table's view will not have the updated value (and in fact will cause
  392. // an ExpressionChangedAfterItHasBeenCheckedError).
  393. // tslint:disable-next-line:validate-decorators
  394. changeDetection: core.ChangeDetectionStrategy.Default,
  395. },] },
  396. ];
  397. return MatTextColumn;
  398. }(table.CdkTextColumn));
  399. /**
  400. * @fileoverview added by tsickle
  401. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  402. */
  403. /** @type {?} */
  404. var EXPORTED_DECLARATIONS = [
  405. // Table
  406. MatTable,
  407. // Template defs
  408. MatHeaderCellDef,
  409. MatHeaderRowDef,
  410. MatColumnDef,
  411. MatCellDef,
  412. MatRowDef,
  413. MatFooterCellDef,
  414. MatFooterRowDef,
  415. // Cell directives
  416. MatHeaderCell,
  417. MatCell,
  418. MatFooterCell,
  419. // Row directives
  420. MatHeaderRow,
  421. MatRow,
  422. MatFooterRow,
  423. MatTextColumn,
  424. ];
  425. var MatTableModule = /** @class */ (function () {
  426. function MatTableModule() {
  427. }
  428. MatTableModule.decorators = [
  429. { type: core.NgModule, args: [{
  430. imports: [
  431. table.CdkTableModule,
  432. common.CommonModule,
  433. core$1.MatCommonModule,
  434. ],
  435. exports: EXPORTED_DECLARATIONS,
  436. declarations: EXPORTED_DECLARATIONS,
  437. },] },
  438. ];
  439. return MatTableModule;
  440. }());
  441. /**
  442. * @fileoverview added by tsickle
  443. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  444. */
  445. /**
  446. * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to
  447. * flaky browser support and the value not being defined in Closure's typings.
  448. * @type {?}
  449. */
  450. var MAX_SAFE_INTEGER = 9007199254740991;
  451. /**
  452. * Data source that accepts a client-side data array and includes native support of filtering,
  453. * sorting (using MatSort), and pagination (using MatPaginator).
  454. *
  455. * Allows for sort customization by overriding sortingDataAccessor, which defines how data
  456. * properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
  457. * which defines how row data is converted to a string for filter matching.
  458. * @template T
  459. */
  460. var /**
  461. * Data source that accepts a client-side data array and includes native support of filtering,
  462. * sorting (using MatSort), and pagination (using MatPaginator).
  463. *
  464. * Allows for sort customization by overriding sortingDataAccessor, which defines how data
  465. * properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
  466. * which defines how row data is converted to a string for filter matching.
  467. * @template T
  468. */
  469. MatTableDataSource = /** @class */ (function (_super) {
  470. __extends(MatTableDataSource, _super);
  471. function MatTableDataSource(initialData) {
  472. if (initialData === void 0) { initialData = []; }
  473. var _this = _super.call(this) || this;
  474. /**
  475. * Stream emitting render data to the table (depends on ordered data changes).
  476. */
  477. _this._renderData = new rxjs.BehaviorSubject([]);
  478. /**
  479. * Stream that emits when a new filter string is set on the data source.
  480. */
  481. _this._filter = new rxjs.BehaviorSubject('');
  482. /**
  483. * Used to react to internal changes of the paginator that are made by the data source itself.
  484. */
  485. _this._internalPageChanges = new rxjs.Subject();
  486. /**
  487. * Subscription to the changes that should trigger an update to the table's rendered rows, such
  488. * as filtering, sorting, pagination, or base data changes.
  489. */
  490. _this._renderChangesSubscription = rxjs.Subscription.EMPTY;
  491. /**
  492. * Data accessor function that is used for accessing data properties for sorting through
  493. * the default sortData function.
  494. * This default function assumes that the sort header IDs (which defaults to the column name)
  495. * matches the data's properties (e.g. column Xyz represents data['Xyz']).
  496. * May be set to a custom function for different behavior.
  497. * @param data Data object that is being accessed.
  498. * @param sortHeaderId The name of the column that represents the data.
  499. */
  500. _this.sortingDataAccessor = (/**
  501. * @param {?} data
  502. * @param {?} sortHeaderId
  503. * @return {?}
  504. */
  505. function (data, sortHeaderId) {
  506. /** @type {?} */
  507. var value = ((/** @type {?} */ (data)))[sortHeaderId];
  508. if (coercion._isNumberValue(value)) {
  509. /** @type {?} */
  510. var numberValue = Number(value);
  511. // Numbers beyond `MAX_SAFE_INTEGER` can't be compared reliably so we
  512. // leave them as strings. For more info: https://goo.gl/y5vbSg
  513. return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
  514. }
  515. return value;
  516. });
  517. /**
  518. * Gets a sorted copy of the data array based on the state of the MatSort. Called
  519. * after changes are made to the filtered data or when sort changes are emitted from MatSort.
  520. * By default, the function retrieves the active sort and its direction and compares data
  521. * by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation
  522. * of data ordering.
  523. * @param data The array of data that should be sorted.
  524. * @param sort The connected MatSort that holds the current sort state.
  525. */
  526. _this.sortData = (/**
  527. * @param {?} data
  528. * @param {?} sort
  529. * @return {?}
  530. */
  531. function (data, sort) {
  532. /** @type {?} */
  533. var active = sort.active;
  534. /** @type {?} */
  535. var direction = sort.direction;
  536. if (!active || direction == '') {
  537. return data;
  538. }
  539. return data.sort((/**
  540. * @param {?} a
  541. * @param {?} b
  542. * @return {?}
  543. */
  544. function (a, b) {
  545. /** @type {?} */
  546. var valueA = _this.sortingDataAccessor(a, active);
  547. /** @type {?} */
  548. var valueB = _this.sortingDataAccessor(b, active);
  549. // If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
  550. // one value exists while the other doesn't. In this case, existing value should come first.
  551. // This avoids inconsistent results when comparing values to undefined/null.
  552. // If neither value exists, return 0 (equal).
  553. /** @type {?} */
  554. var comparatorResult = 0;
  555. if (valueA != null && valueB != null) {
  556. // Check if one value is greater than the other; if equal, comparatorResult should remain 0.
  557. if (valueA > valueB) {
  558. comparatorResult = 1;
  559. }
  560. else if (valueA < valueB) {
  561. comparatorResult = -1;
  562. }
  563. }
  564. else if (valueA != null) {
  565. comparatorResult = 1;
  566. }
  567. else if (valueB != null) {
  568. comparatorResult = -1;
  569. }
  570. return comparatorResult * (direction == 'asc' ? 1 : -1);
  571. }));
  572. });
  573. /**
  574. * Checks if a data object matches the data source's filter string. By default, each data object
  575. * is converted to a string of its properties and returns true if the filter has
  576. * at least one occurrence in that string. By default, the filter string has its whitespace
  577. * trimmed and the match is case-insensitive. May be overridden for a custom implementation of
  578. * filter matching.
  579. * @param data Data object used to check against the filter.
  580. * @param filter Filter string that has been set on the data source.
  581. * @return Whether the filter matches against the data
  582. */
  583. _this.filterPredicate = (/**
  584. * @param {?} data
  585. * @param {?} filter
  586. * @return {?}
  587. */
  588. function (data, filter) {
  589. // Transform the data into a lowercase string of all property values.
  590. /** @type {?} */
  591. var dataStr = Object.keys(data).reduce((/**
  592. * @param {?} currentTerm
  593. * @param {?} key
  594. * @return {?}
  595. */
  596. function (currentTerm, key) {
  597. // Use an obscure Unicode character to delimit the words in the concatenated string.
  598. // This avoids matches where the values of two columns combined will match the user's query
  599. // (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something
  600. // that has a very low chance of being typed in by somebody in a text field. This one in
  601. // particular is "White up-pointing triangle with dot" from
  602. // https://en.wikipedia.org/wiki/List_of_Unicode_characters
  603. return currentTerm + ((/** @type {?} */ (data)))[key] + '◬';
  604. }), '').toLowerCase();
  605. // Transform the filter by converting it to lowercase and removing whitespace.
  606. /** @type {?} */
  607. var transformedFilter = filter.trim().toLowerCase();
  608. return dataStr.indexOf(transformedFilter) != -1;
  609. });
  610. _this._data = new rxjs.BehaviorSubject(initialData);
  611. _this._updateChangeSubscription();
  612. return _this;
  613. }
  614. Object.defineProperty(MatTableDataSource.prototype, "data", {
  615. /** Array of data that should be rendered by the table, where each object represents one row. */
  616. get: /**
  617. * Array of data that should be rendered by the table, where each object represents one row.
  618. * @return {?}
  619. */
  620. function () { return this._data.value; },
  621. set: /**
  622. * @param {?} data
  623. * @return {?}
  624. */
  625. function (data) { this._data.next(data); },
  626. enumerable: true,
  627. configurable: true
  628. });
  629. Object.defineProperty(MatTableDataSource.prototype, "filter", {
  630. /**
  631. * Filter term that should be used to filter out objects from the data array. To override how
  632. * data objects match to this filter string, provide a custom function for filterPredicate.
  633. */
  634. get: /**
  635. * Filter term that should be used to filter out objects from the data array. To override how
  636. * data objects match to this filter string, provide a custom function for filterPredicate.
  637. * @return {?}
  638. */
  639. function () { return this._filter.value; },
  640. set: /**
  641. * @param {?} filter
  642. * @return {?}
  643. */
  644. function (filter) { this._filter.next(filter); },
  645. enumerable: true,
  646. configurable: true
  647. });
  648. Object.defineProperty(MatTableDataSource.prototype, "sort", {
  649. /**
  650. * Instance of the MatSort directive used by the table to control its sorting. Sort changes
  651. * emitted by the MatSort will trigger an update to the table's rendered data.
  652. */
  653. get: /**
  654. * Instance of the MatSort directive used by the table to control its sorting. Sort changes
  655. * emitted by the MatSort will trigger an update to the table's rendered data.
  656. * @return {?}
  657. */
  658. function () { return this._sort; },
  659. set: /**
  660. * @param {?} sort
  661. * @return {?}
  662. */
  663. function (sort) {
  664. this._sort = sort;
  665. this._updateChangeSubscription();
  666. },
  667. enumerable: true,
  668. configurable: true
  669. });
  670. Object.defineProperty(MatTableDataSource.prototype, "paginator", {
  671. /**
  672. * Instance of the MatPaginator component used by the table to control what page of the data is
  673. * displayed. Page changes emitted by the MatPaginator will trigger an update to the
  674. * table's rendered data.
  675. *
  676. * Note that the data source uses the paginator's properties to calculate which page of data
  677. * should be displayed. If the paginator receives its properties as template inputs,
  678. * e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the paginator's view has been
  679. * initialized before assigning it to this data source.
  680. */
  681. get: /**
  682. * Instance of the MatPaginator component used by the table to control what page of the data is
  683. * displayed. Page changes emitted by the MatPaginator will trigger an update to the
  684. * table's rendered data.
  685. *
  686. * Note that the data source uses the paginator's properties to calculate which page of data
  687. * should be displayed. If the paginator receives its properties as template inputs,
  688. * e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the paginator's view has been
  689. * initialized before assigning it to this data source.
  690. * @return {?}
  691. */
  692. function () { return this._paginator; },
  693. set: /**
  694. * @param {?} paginator
  695. * @return {?}
  696. */
  697. function (paginator) {
  698. this._paginator = paginator;
  699. this._updateChangeSubscription();
  700. },
  701. enumerable: true,
  702. configurable: true
  703. });
  704. /**
  705. * Subscribe to changes that should trigger an update to the table's rendered rows. When the
  706. * changes occur, process the current state of the filter, sort, and pagination along with
  707. * the provided base data and send it to the table for rendering.
  708. */
  709. /**
  710. * Subscribe to changes that should trigger an update to the table's rendered rows. When the
  711. * changes occur, process the current state of the filter, sort, and pagination along with
  712. * the provided base data and send it to the table for rendering.
  713. * @return {?}
  714. */
  715. MatTableDataSource.prototype._updateChangeSubscription = /**
  716. * Subscribe to changes that should trigger an update to the table's rendered rows. When the
  717. * changes occur, process the current state of the filter, sort, and pagination along with
  718. * the provided base data and send it to the table for rendering.
  719. * @return {?}
  720. */
  721. function () {
  722. var _this = this;
  723. // Sorting and/or pagination should be watched if MatSort and/or MatPaginator are provided.
  724. // The events should emit whenever the component emits a change or initializes, or if no
  725. // component is provided, a stream with just a null event should be provided.
  726. // The `sortChange` and `pageChange` acts as a signal to the combineLatests below so that the
  727. // pipeline can progress to the next step. Note that the value from these streams are not used,
  728. // they purely act as a signal to progress in the pipeline.
  729. /** @type {?} */
  730. var sortChange = this._sort ?
  731. (/** @type {?} */ (rxjs.merge(this._sort.sortChange, this._sort.initialized))) :
  732. rxjs.of(null);
  733. /** @type {?} */
  734. var pageChange = this._paginator ?
  735. (/** @type {?} */ (rxjs.merge(this._paginator.page, this._internalPageChanges, this._paginator.initialized))) :
  736. rxjs.of(null);
  737. /** @type {?} */
  738. var dataStream = this._data;
  739. // Watch for base data or filter changes to provide a filtered set of data.
  740. /** @type {?} */
  741. var filteredData = rxjs.combineLatest(dataStream, this._filter)
  742. .pipe(operators.map((/**
  743. * @param {?} __0
  744. * @return {?}
  745. */
  746. function (_a) {
  747. var data = _a[0];
  748. return _this._filterData(data);
  749. })));
  750. // Watch for filtered data or sort changes to provide an ordered set of data.
  751. /** @type {?} */
  752. var orderedData = rxjs.combineLatest(filteredData, sortChange)
  753. .pipe(operators.map((/**
  754. * @param {?} __0
  755. * @return {?}
  756. */
  757. function (_a) {
  758. var data = _a[0];
  759. return _this._orderData(data);
  760. })));
  761. // Watch for ordered data or page changes to provide a paged set of data.
  762. /** @type {?} */
  763. var paginatedData = rxjs.combineLatest(orderedData, pageChange)
  764. .pipe(operators.map((/**
  765. * @param {?} __0
  766. * @return {?}
  767. */
  768. function (_a) {
  769. var data = _a[0];
  770. return _this._pageData(data);
  771. })));
  772. // Watched for paged data changes and send the result to the table to render.
  773. this._renderChangesSubscription.unsubscribe();
  774. this._renderChangesSubscription = paginatedData.subscribe((/**
  775. * @param {?} data
  776. * @return {?}
  777. */
  778. function (data) { return _this._renderData.next(data); }));
  779. };
  780. /**
  781. * Returns a filtered data array where each filter object contains the filter string within
  782. * the result of the filterTermAccessor function. If no filter is set, returns the data array
  783. * as provided.
  784. */
  785. /**
  786. * Returns a filtered data array where each filter object contains the filter string within
  787. * the result of the filterTermAccessor function. If no filter is set, returns the data array
  788. * as provided.
  789. * @param {?} data
  790. * @return {?}
  791. */
  792. MatTableDataSource.prototype._filterData = /**
  793. * Returns a filtered data array where each filter object contains the filter string within
  794. * the result of the filterTermAccessor function. If no filter is set, returns the data array
  795. * as provided.
  796. * @param {?} data
  797. * @return {?}
  798. */
  799. function (data) {
  800. var _this = this;
  801. // If there is a filter string, filter out data that does not contain it.
  802. // Each data object is converted to a string using the function defined by filterTermAccessor.
  803. // May be overridden for customization.
  804. this.filteredData =
  805. !this.filter ? data : data.filter((/**
  806. * @param {?} obj
  807. * @return {?}
  808. */
  809. function (obj) { return _this.filterPredicate(obj, _this.filter); }));
  810. if (this.paginator) {
  811. this._updatePaginator(this.filteredData.length);
  812. }
  813. return this.filteredData;
  814. };
  815. /**
  816. * Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
  817. * data array as provided. Uses the default data accessor for data lookup, unless a
  818. * sortDataAccessor function is defined.
  819. */
  820. /**
  821. * Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
  822. * data array as provided. Uses the default data accessor for data lookup, unless a
  823. * sortDataAccessor function is defined.
  824. * @param {?} data
  825. * @return {?}
  826. */
  827. MatTableDataSource.prototype._orderData = /**
  828. * Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
  829. * data array as provided. Uses the default data accessor for data lookup, unless a
  830. * sortDataAccessor function is defined.
  831. * @param {?} data
  832. * @return {?}
  833. */
  834. function (data) {
  835. // If there is no active sort or direction, return the data without trying to sort.
  836. if (!this.sort) {
  837. return data;
  838. }
  839. return this.sortData(data.slice(), this.sort);
  840. };
  841. /**
  842. * Returns a paged slice of the provided data array according to the provided MatPaginator's page
  843. * index and length. If there is no paginator provided, returns the data array as provided.
  844. */
  845. /**
  846. * Returns a paged slice of the provided data array according to the provided MatPaginator's page
  847. * index and length. If there is no paginator provided, returns the data array as provided.
  848. * @param {?} data
  849. * @return {?}
  850. */
  851. MatTableDataSource.prototype._pageData = /**
  852. * Returns a paged slice of the provided data array according to the provided MatPaginator's page
  853. * index and length. If there is no paginator provided, returns the data array as provided.
  854. * @param {?} data
  855. * @return {?}
  856. */
  857. function (data) {
  858. if (!this.paginator) {
  859. return data;
  860. }
  861. /** @type {?} */
  862. var startIndex = this.paginator.pageIndex * this.paginator.pageSize;
  863. return data.slice(startIndex, startIndex + this.paginator.pageSize);
  864. };
  865. /**
  866. * Updates the paginator to reflect the length of the filtered data, and makes sure that the page
  867. * index does not exceed the paginator's last page. Values are changed in a resolved promise to
  868. * guard against making property changes within a round of change detection.
  869. */
  870. /**
  871. * Updates the paginator to reflect the length of the filtered data, and makes sure that the page
  872. * index does not exceed the paginator's last page. Values are changed in a resolved promise to
  873. * guard against making property changes within a round of change detection.
  874. * @param {?} filteredDataLength
  875. * @return {?}
  876. */
  877. MatTableDataSource.prototype._updatePaginator = /**
  878. * Updates the paginator to reflect the length of the filtered data, and makes sure that the page
  879. * index does not exceed the paginator's last page. Values are changed in a resolved promise to
  880. * guard against making property changes within a round of change detection.
  881. * @param {?} filteredDataLength
  882. * @return {?}
  883. */
  884. function (filteredDataLength) {
  885. var _this = this;
  886. Promise.resolve().then((/**
  887. * @return {?}
  888. */
  889. function () {
  890. /** @type {?} */
  891. var paginator = _this.paginator;
  892. if (!paginator) {
  893. return;
  894. }
  895. paginator.length = filteredDataLength;
  896. // If the page index is set beyond the page, reduce it to the last page.
  897. if (paginator.pageIndex > 0) {
  898. /** @type {?} */
  899. var lastPageIndex = Math.ceil(paginator.length / paginator.pageSize) - 1 || 0;
  900. /** @type {?} */
  901. var newPageIndex = Math.min(paginator.pageIndex, lastPageIndex);
  902. if (newPageIndex !== paginator.pageIndex) {
  903. paginator.pageIndex = newPageIndex;
  904. // Since the paginator only emits after user-generated changes,
  905. // we need our own stream so we know to should re-render the data.
  906. _this._internalPageChanges.next();
  907. }
  908. }
  909. }));
  910. };
  911. /**
  912. * Used by the MatTable. Called when it connects to the data source.
  913. * @docs-private
  914. */
  915. /**
  916. * Used by the MatTable. Called when it connects to the data source.
  917. * \@docs-private
  918. * @return {?}
  919. */
  920. MatTableDataSource.prototype.connect = /**
  921. * Used by the MatTable. Called when it connects to the data source.
  922. * \@docs-private
  923. * @return {?}
  924. */
  925. function () { return this._renderData; };
  926. /**
  927. * Used by the MatTable. Called when it is destroyed. No-op.
  928. * @docs-private
  929. */
  930. /**
  931. * Used by the MatTable. Called when it is destroyed. No-op.
  932. * \@docs-private
  933. * @return {?}
  934. */
  935. MatTableDataSource.prototype.disconnect = /**
  936. * Used by the MatTable. Called when it is destroyed. No-op.
  937. * \@docs-private
  938. * @return {?}
  939. */
  940. function () { };
  941. return MatTableDataSource;
  942. }(table.DataSource));
  943. exports.MatTableModule = MatTableModule;
  944. exports.MatCellDef = MatCellDef;
  945. exports.MatHeaderCellDef = MatHeaderCellDef;
  946. exports.MatFooterCellDef = MatFooterCellDef;
  947. exports.MatColumnDef = MatColumnDef;
  948. exports.MatHeaderCell = MatHeaderCell;
  949. exports.MatFooterCell = MatFooterCell;
  950. exports.MatCell = MatCell;
  951. exports.MatTable = MatTable;
  952. exports.MatHeaderRowDef = MatHeaderRowDef;
  953. exports.MatFooterRowDef = MatFooterRowDef;
  954. exports.MatRowDef = MatRowDef;
  955. exports.MatHeaderRow = MatHeaderRow;
  956. exports.MatFooterRow = MatFooterRow;
  957. exports.MatRow = MatRow;
  958. exports.MatTableDataSource = MatTableDataSource;
  959. exports.MatTextColumn = MatTextColumn;
  960. Object.defineProperty(exports, '__esModule', { value: true });
  961. })));
  962. //# sourceMappingURL=material-table.umd.js.map