mat-vs-table
Version:
[](https://badge.fury.io/js/mat-vs-table) [](https://angular.io/styleguide)
952 lines (948 loc) • 71.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/collections'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/table'), require('@angular/cdk/coercion'), require('@angular/common'), require('@angular/cdk/bidi'), require('@angular/cdk/scrolling'), require('@angular/cdk/platform')) :
typeof define === 'function' && define.amd ? define('mat-vs-table', ['exports', '@angular/core', '@angular/cdk/collections', 'rxjs', 'rxjs/operators', '@angular/cdk/table', '@angular/cdk/coercion', '@angular/common', '@angular/cdk/bidi', '@angular/cdk/scrolling', '@angular/cdk/platform'], factory) :
(global = global || self, factory(global['mat-vs-table'] = {}, global.ng.core, global.ng.cdk.collections, global.rxjs, global.rxjs.operators, global.ng.cdk.table, global.ng.cdk.coercion, global.ng.common, global.ng.cdk.bidi, global.ng.cdk.scrolling, global.ng.cdk.platform));
}(this, (function (exports, i0, collections, rxjs, operators, i4, coercion, common, i1, i2, i3) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, exports) {
for (var p in m)
if (p !== "default" && !exports.hasOwnProperty(p))
__createBinding(exports, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (Object.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var _c0 = [[["caption"]], [["colgroup"], ["col"]]];
var _c1 = ["caption", "colgroup, col"];
function getTableUnknownColumnError(id) {
return Error("Could not find column with id \"" + id + "\".");
}
function getTableDuplicateColumnNameError(name) {
return Error("Duplicate column definition name provided: \"" + name + "\".");
}
function getTableMultipleDefaultRowDefsError() {
return Error("There can only be one default row without a when predicate function.");
}
function getTableMissingMatchingRowDefError(data) {
return Error("Could not find a matching row definition for the" +
("provided row data: " + JSON.stringify(data)));
}
function getTableMissingRowDefsError() {
return Error('Missing definitions for header, footer, and row; ' +
'cannot determine which columns should be rendered.');
}
function getTableUnknownDataSourceError() {
return Error("Provided data source did not match an array, Observable, or DataSource");
}
var RowViewRef = /** @class */ (function (_super) {
__extends(RowViewRef, _super);
function RowViewRef() {
return _super !== null && _super.apply(this, arguments) || this;
}
return RowViewRef;
}(i0.EmbeddedViewRef));
var MatVsTableComponent = /** @class */ (function () {
function MatVsTableComponent(_differs, _changeDetectorRef, _elementRef, role, _dir, _viewport, ngZone, _document, _platform) {
this._differs = _differs;
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
this._dir = _dir;
this._viewport = _viewport;
this.ngZone = ngZone;
this._platform = _platform;
/** Subject that emits when the component has been destroyed. */
this._onDestroy = new rxjs.Subject();
/**
* Map of all the user's defined columns (header, data, and footer cell template) identified by
* name. Collection populated by the column definitions gathered by `ContentChildren` as well as
* any custom column definitions added to `_customColumnDefs`.
*/
this._columnDefsByName = new Map();
/**
* Column definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* column definitions as *its* content child.
*/
this._customColumnDefs = new Set();
/**
* Data row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* built-in data rows as *its* content child.
*/
this._customRowDefs = new Set();
/**
* Header row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* built-in header rows as *its* content child.
*/
this._customHeaderRowDefs = new Set();
/**
* Footer row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has a
* built-in footer row as *its* content child.
*/
this._customFooterRowDefs = new Set();
/**
* Whether the header row definition has been changed. Triggers an update to the header row after
* content is checked. Initialized as true so that the table renders the initial set of rows.
*/
this._headerRowDefChanged = true;
/**
* Whether the footer row definition has been changed. Triggers an update to the footer row after
* content is checked. Initialized as true so that the table renders the initial set of rows.
*/
this._footerRowDefChanged = true;
/**
* Cache of the latest rendered `RenderRow` objects as a map for easy retrieval when constructing
* a new list of `RenderRow` objects for rendering rows. Since the new list is constructed with
* the cached `RenderRow` objects when possible, the row identity is preserved when the data
* and row template matches, which allows the `IterableDiffer` to check rows by reference
* and understand which rows are added/moved/removed.
*
* Implemented as a map of maps where the first key is the `data: T` object and the second is the
* `CdkRowDef<T>` object. With the two keys, the cache points to a `RenderRow<T>` object that
* contains an array of created pairs. The array is necessary to handle cases where the data
* array contains multiple duplicate data objects and each instantiated `RenderRow` must be
* stored.
*/
this._cachedRenderRowsMap = new Map();
/**
* CSS class added to any row or cell that has sticky positioning applied. May be overriden by
* table subclasses.
*/
this.stickyCssClass = 'mat-table-sticky';
/** Whether the no data row is currently showing anything. */
this._isShowingNoDataRow = false;
this._multiTemplateDataRows = false;
// TODO(andrewseguin): Remove max value as the end index
// and instead calculate the view on init and scroll.
/**
* Stream containing the latest information on what rows are being displayed on screen.
* Can be used by the data source to as a heuristic of what data should be provided.
*
* @docs-private
*/
this.viewChange = new rxjs.BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
if (!role) {
this._elementRef.nativeElement.setAttribute('role', 'grid');
}
this._document = _document;
this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
}
Object.defineProperty(MatVsTableComponent.prototype, "trackBy", {
/**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
* relative to the function to know if a row should be added/removed/moved.
* Accepts a function that takes two parameters, `index` and `item`.
*/
get: function () {
return this._trackByFn;
},
set: function (fn) {
if (i0.isDevMode() && fn != null && typeof fn !== 'function' && console &&
console.warn) {
console.warn("trackBy must be a function, but received " + JSON.stringify(fn) + ".");
}
this._trackByFn = fn;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MatVsTableComponent.prototype, "dataSource", {
/**
* The table's source of data, which can be provided in three ways (in order of complexity):
* - Simple data array (each object represents one table row)
* - Stream that emits a data array each time the array changes
* - `DataSource` object that implements the connect/disconnect interface.
*
* If a data array is provided, the table must be notified when the array's objects are
* added, removed, or moved. This can be done by calling the `renderRows()` function which will
* render the diff since the last table render. If the data array reference is changed, the table
* will automatically trigger an update to the rows.
*
* When providing an Observable stream, the table will trigger an update automatically when the
* stream emits a new array of data.
*
* Finally, when providing a `DataSource` object, the table will use the Observable stream
* provided by the connect function and trigger updates when that stream emits new data array
* values. During the table's ngOnDestroy or when the data source is removed from the table, the
* table will call the DataSource's `disconnect` function (may be useful for cleaning up any
* subscriptions registered during the connect process).
*/
get: function () {
return this._dataSource;
},
set: function (dataSource) {
if (this._dataSource !== dataSource) {
this._switchDataSource(dataSource);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(MatVsTableComponent.prototype, "multiTemplateDataRows", {
/**
* Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
* predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
* dataobject will render the first row that evaluates its when predicate to true, in the order
* defined in the table, or otherwise the default row which does not have a when predicate.
*/
get: function () {
return this._multiTemplateDataRows;
},
set: function (v) {
this._multiTemplateDataRows = coercion.coerceBooleanProperty(v);
// In Ivy if this value is set via a static attribute (e.g. <table multiTemplateDataRows>),
// this setter will be invoked before the row outlet has been defined hence the null check.
if (this._rowOutlet && this._rowOutlet.viewContainer.length) {
this._forceRenderDataRows();
}
},
enumerable: false,
configurable: true
});
/** Helper to extract size from a DOM Node. */
MatVsTableComponent.prototype.getSize = function (orientation, node) {
var el = node;
if (!el.getBoundingClientRect) {
return 0;
}
var rect = el.getBoundingClientRect();
return orientation === 'horizontal' ? rect.width : rect.height;
};
/**
* Measures the combined size (width for horizontal orientation, height for vertical) of all items
* in the specified range. Throws an error if the range includes items that are not currently
* rendered.
*/
MatVsTableComponent.prototype.measureRangeSize = function (range, orientation) {
if (range.start >= range.end) {
return 0;
}
if (range.start < this._renderedRange.start || range.end > this._renderedRange.end) {
throw Error("Error: attempted to measure an item that isn't rendered.");
}
// The index into the list of rendered views for the first item in the range.
var renderedStartIndex = range.start - this._renderedRange.start;
// The length of the range we're measuring.
var rangeLen = range.end - range.start;
// Loop over all root nodes for all items in the range and sum up their size.
var totalSize = 0;
var i = rangeLen;
while (i--) {
var view = this._rowOutlet.viewContainer.get(i + renderedStartIndex);
var j = view ? view.rootNodes.length : 0;
while (j--) {
totalSize += this.getSize(orientation, view.rootNodes[j]);
}
}
return totalSize;
};
MatVsTableComponent.prototype.ngOnInit = function () {
var _this = this;
this._setupStickyStyler();
if (this._isNativeHtmlTable) {
this._applyNativeTableSections();
}
// Set up the trackBy function so that it uses the `RenderRow` as its identity by default. If
// the user has provided a custom trackBy, return the result of that function as evaluated
// with the values of the `RenderRow`'s data and index.
this._dataDiffer = this._differs.find([]).create(function (_i, dataRow) {
return _this.trackBy ? _this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
});
};
MatVsTableComponent.prototype.ngAfterContentChecked = function () {
var _this = this;
// Cache the row and column definitions gathered by ContentChildren and programmatic injection.
this._cacheRowDefs();
this._cacheColumnDefs();
// Make sure that the user has at least added header, footer, or data row def.
if (!this._headerRowDefs.length && !this._footerRowDefs.length && !this._rowDefs.length) {
throw getTableMissingRowDefsError();
}
// Render updates if the list of columns have been changed for the header, row, or footer defs.
this._renderUpdatedColumns();
// If the header row definition has been changed, trigger a render to the header row.
if (this._headerRowDefChanged) {
this._forceRenderHeaderRows();
this._headerRowDefChanged = false;
}
// If the footer row definition has been changed, trigger a render to the footer row.
if (this._footerRowDefChanged) {
this._forceRenderFooterRows();
this._footerRowDefChanged = false;
}
// If there is a data source and row definitions, connect to the data source unless a
// connection has already been made.
if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
this._observeRenderChanges();
this._viewport.renderedRangeStream.pipe(operators.takeUntil(this._onDestroy)).subscribe(function (range) {
_this._renderedRange = range;
_this.ngZone.run(function () { return _this.viewChange.next(_this._renderedRange); });
_this._onRenderedDataChange();
});
this._viewport.attach(this);
}
this._checkStickyStates();
};
/** React to scroll state changes in the viewport. */
MatVsTableComponent.prototype._onRenderedDataChange = function () {
if (!this._renderedRange) {
return;
}
this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
this.renderRows();
};
MatVsTableComponent.prototype.ngOnDestroy = function () {
this._rowOutlet.viewContainer.clear();
this._noDataRowOutlet.viewContainer.clear();
this._headerRowOutlet.viewContainer.clear();
this._footerRowOutlet.viewContainer.clear();
this._cachedRenderRowsMap.clear();
this._onDestroy.next();
this._onDestroy.complete();
if (collections.isDataSource(this.dataSource)) {
this.dataSource.disconnect(this);
}
};
/**
* Renders rows based on the table's latest set of data, which was either provided directly as an
* input or retrieved through an Observable stream (directly or from a DataSource).
* Checks for differences in the data since the last diff to perform only the necessary
* changes (add/remove/move rows).
*
* If the table's data source is a DataSource or Observable, this will be invoked automatically
* each time the provided Observable stream emits a new data array. Otherwise if your data is
* an array, this function will need to be called to render any changes.
*/
MatVsTableComponent.prototype.renderRows = function () {
var _this = this;
this._renderRows = this._getAllRenderRows();
var changes = this._dataDiffer.diff(this._renderRows);
if (!changes) {
return;
}
var viewContainer = this._rowOutlet.viewContainer;
changes.forEachOperation(function (record, prevIndex, currentIndex) {
if (record.previousIndex == null) {
_this._insertRow(record.item, currentIndex);
}
else if (currentIndex == null) {
viewContainer.remove(prevIndex);
}
else {
var view = viewContainer.get(prevIndex);
viewContainer.move(view, currentIndex);
}
});
// Update the meta context of a row's context data (index, count, first, last, ...)
this._updateRowIndexContext();
// Update rows that did not get added/removed/moved but may have had their identity changed,
// e.g. if trackBy matched data on some property but the actual data reference changed.
changes.forEachIdentityChange(function (record) {
var rowView = viewContainer.get(record.currentIndex);
rowView.context.$implicit = record.item.data;
});
this._updateNoDataRow();
this.updateStickyColumnStyles();
};
/** Adds a column definition that was not included as part of the content children. */
MatVsTableComponent.prototype.addColumnDef = function (columnDef) {
this._customColumnDefs.add(columnDef);
};
/** Removes a column definition that was not included as part of the content children. */
MatVsTableComponent.prototype.removeColumnDef = function (columnDef) {
this._customColumnDefs.delete(columnDef);
};
/** Adds a row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.addRowDef = function (rowDef) {
this._customRowDefs.add(rowDef);
};
/** Removes a row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.removeRowDef = function (rowDef) {
this._customRowDefs.delete(rowDef);
};
/** Adds a header row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.addHeaderRowDef = function (headerRowDef) {
this._customHeaderRowDefs.add(headerRowDef);
this._headerRowDefChanged = true;
};
/** Removes a header row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.removeHeaderRowDef = function (headerRowDef) {
this._customHeaderRowDefs.delete(headerRowDef);
this._headerRowDefChanged = true;
};
/** Adds a footer row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.addFooterRowDef = function (footerRowDef) {
this._customFooterRowDefs.add(footerRowDef);
this._footerRowDefChanged = true;
};
/** Removes a footer row definition that was not included as part of the content children. */
MatVsTableComponent.prototype.removeFooterRowDef = function (footerRowDef) {
this._customFooterRowDefs.delete(footerRowDef);
this._footerRowDefChanged = true;
};
/**
* Updates the header sticky styles. First resets all applied styles with respect to the cells
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
* automatically called when the header row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
MatVsTableComponent.prototype.updateStickyHeaderRowStyles = function () {
var headerRows = this._getRenderedRows(this._headerRowOutlet);
var tableElement = this._elementRef.nativeElement;
// Hide the thead element if there are no header rows. This is necessary to satisfy
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
// required child `row`.
var thead = tableElement.querySelector('thead');
if (thead) {
thead.style.display = headerRows.length ? '' : 'none';
}
var stickyStates = this._headerRowDefs.map(function (def) { return def.sticky; });
this._stickyStyler.clearStickyPositioning(headerRows, ['top']);
this._stickyStyler.stickRows(headerRows, stickyStates, 'top');
// Reset the dirty state of the sticky input change since it has been used.
this._headerRowDefs.forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
* automatically called when the footer row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
MatVsTableComponent.prototype.updateStickyFooterRowStyles = function () {
var footerRows = this._getRenderedRows(this._footerRowOutlet);
var tableElement = this._elementRef.nativeElement;
// Hide the tfoot element if there are no footer rows. This is necessary to satisfy
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
// required child `row`.
var tfoot = tableElement.querySelector('tfoot');
if (tfoot) {
tfoot.style.display = footerRows.length ? '' : 'none';
}
var stickyStates = this._footerRowDefs.map(function (def) { return def.sticky; });
this._stickyStyler.clearStickyPositioning(footerRows, ['bottom']);
this._stickyStyler.stickRows(footerRows, stickyStates, 'bottom');
this._stickyStyler.updateStickyFooterContainer(this._elementRef.nativeElement, stickyStates);
// Reset the dirty state of the sticky input change since it has been used.
this._footerRowDefs.forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Updates the column sticky styles. First resets all applied styles with respect to the cells
* sticking to the left and right. Then sticky styles are added for the left and right according
* to the column definitions for each cell in each row. This is automatically called when
* the data source provides a new set of data or when a column definition changes its sticky
* input. May be called manually for cases where the cell content changes outside of these events.
*/
MatVsTableComponent.prototype.updateStickyColumnStyles = function () {
var _this = this;
var headerRows = this._getRenderedRows(this._headerRowOutlet);
var dataRows = this._getRenderedRows(this._rowOutlet);
var footerRows = this._getRenderedRows(this._footerRowOutlet);
// Clear the left and right positioning from all columns in the table across all rows since
// sticky columns span across all table sections (header, data, footer)
this._stickyStyler.clearStickyPositioning(__spread(headerRows, dataRows, footerRows), ['left', 'right']);
// Update the sticky styles for each header row depending on the def's sticky state
headerRows.forEach(function (headerRow, i) {
_this._addStickyColumnStyles([headerRow], _this._headerRowDefs[i]);
});
// Update the sticky styles for each data row depending on its def's sticky state
this._rowDefs.forEach(function (rowDef) {
// Collect all the rows rendered with this row definition.
var rows = [];
for (var i = 0; i < dataRows.length; i++) {
if (_this._renderRows[i].rowDef === rowDef) {
rows.push(dataRows[i]);
}
}
_this._addStickyColumnStyles(rows, rowDef);
});
// Update the sticky styles for each footer row depending on the def's sticky state
footerRows.forEach(function (footerRow, i) {
_this._addStickyColumnStyles([footerRow], _this._footerRowDefs[i]);
});
// Reset the dirty state of the sticky input change since it has been used.
Array.from(this._columnDefsByName.values()).forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Get the list of RenderRow objects to render according to the current list of data and defined
* row definitions. If the previous list already contained a particular pair, it should be reused
* so that the differ equates their references.
*/
MatVsTableComponent.prototype._getAllRenderRows = function () {
var renderRows = [];
// Store the cache and create a new one. Any re-used RenderRow objects will be moved into the
// new cache while unused ones can be picked up by garbage collection.
var prevCachedRenderRows = this._cachedRenderRowsMap;
this._cachedRenderRowsMap = new Map();
// For each data object, get the list of rows that should be rendered, represented by the
// respective `RenderRow` object which is the pair of `data` and `CdkRowDef`.
for (var i = 0; i < this._renderedItems.length; i++) {
var data = this._renderedItems[i];
var renderRowsForData = this._getRenderRowsForData(data, i, prevCachedRenderRows.get(data));
if (!this._cachedRenderRowsMap.has(data)) {
this._cachedRenderRowsMap.set(data, new WeakMap());
}
for (var j = 0; j < renderRowsForData.length; j++) {
var renderRow = renderRowsForData[j];
var cache = this._cachedRenderRowsMap.get(renderRow.data);
if (cache.has(renderRow.rowDef)) {
cache.get(renderRow.rowDef).push(renderRow);
}
else {
cache.set(renderRow.rowDef, [renderRow]);
}
renderRows.push(renderRow);
}
}
return renderRows;
};
/**
* Gets a list of `RenderRow<T>` for the provided data object and any `CdkRowDef` objects that
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
* `(T, CdkRowDef)` pair.
*/
MatVsTableComponent.prototype._getRenderRowsForData = function (data, dataIndex, cache) {
var rowDefs = this._getRowDefs(data, dataIndex);
return rowDefs.map(function (rowDef) {
var cachedRenderRows = (cache && cache.has(rowDef)) ? cache.get(rowDef) : [];
if (cachedRenderRows.length) {
var dataRow = cachedRenderRows.shift();
dataRow.dataIndex = dataIndex;
return dataRow;
}
else {
return { data: data, rowDef: rowDef, dataIndex: dataIndex };
}
});
};
/** Update the map containing the content's column definitions. */
MatVsTableComponent.prototype._cacheColumnDefs = function () {
var _this = this;
this._columnDefsByName.clear();
var columnDefs = mergeArrayAndSet(this._getOwnDefs(this._contentColumnDefs), this._customColumnDefs);
columnDefs.forEach(function (columnDef) {
if (_this._columnDefsByName.has(columnDef.name)) {
throw getTableDuplicateColumnNameError(columnDef.name);
}
_this._columnDefsByName.set(columnDef.name, columnDef);
});
};
/** Update the list of all available row definitions that can be used. */
MatVsTableComponent.prototype._cacheRowDefs = function () {
this._headerRowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentHeaderRowDefs), this._customHeaderRowDefs);
this._footerRowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentFooterRowDefs), this._customFooterRowDefs);
this._rowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentRowDefs), this._customRowDefs);
// After all row definitions are determined, find the row definition to be considered default.
var defaultRowDefs = this._rowDefs.filter(function (def) { return !def.when; });
if (!this.multiTemplateDataRows && defaultRowDefs.length > 1) {
throw getTableMultipleDefaultRowDefsError();
}
this._defaultRowDef = defaultRowDefs[0];
};
/**
* Check if the header, data, or footer rows have changed what columns they want to display or
* whether the sticky states have changed for the header or footer. If there is a diff, then
* re-render that section.
*/
MatVsTableComponent.prototype._renderUpdatedColumns = function () {
var columnsDiffReducer = function (acc, def) { return acc || !!def.getColumnsDiff(); };
// Force re-render data rows if the list of column definitions have changed.
if (this._rowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderDataRows();
}
// Force re-render header/footer rows if the list of column definitions have changed..
if (this._headerRowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderHeaderRows();
}
if (this._footerRowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderFooterRows();
}
};
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the row outlet. Otherwise start listening for new data.
*/
MatVsTableComponent.prototype._switchDataSource = function (dataSource) {
this._data = [];
this._renderedItems = [];
if (collections.isDataSource(this.dataSource)) {
this.dataSource.disconnect(this);
}
// Stop listening for data from the previous data source.
if (this._renderChangeSubscription) {
this._renderChangeSubscription.unsubscribe();
this._renderChangeSubscription = null;
}
if (!dataSource) {
if (this._dataDiffer) {
this._dataDiffer.diff([]);
}
this._rowOutlet.viewContainer.clear();
}
this._dataSource = dataSource;
};
/** Set up a subscription for the data provided by the data source. */
MatVsTableComponent.prototype._observeRenderChanges = function () {
var _this = this;
// If no data source has been set, there is nothing to observe for changes.
if (!this.dataSource) {
return;
}
var dataStream;
if (collections.isDataSource(this.dataSource)) {
dataStream = this.dataSource.connect(this);
}
else if (rxjs.isObservable(this.dataSource)) {
dataStream = this.dataSource;
}
else if (Array.isArray(this.dataSource)) {
dataStream = rxjs.of(this.dataSource);
}
if (dataStream === undefined) {
throw getTableUnknownDataSourceError();
}
this.dataStream = dataStream;
this._renderChangeSubscription = dataStream.pipe(operators.takeUntil(this._onDestroy)).subscribe(function (data) {
_this._data = data || [];
_this.renderRows();
});
};
/**
* Clears any existing content in the header row outlet and creates a new embedded view
* in the outlet using the header row definition.
*/
MatVsTableComponent.prototype._forceRenderHeaderRows = function () {
var _this = this;
// Clear the header row outlet if any content exists.
if (this._headerRowOutlet.viewContainer.length > 0) {
this._headerRowOutlet.viewContainer.clear();
}
this._headerRowDefs.forEach(function (def, i) { return _this._renderRow(_this._headerRowOutlet, def, i); });
this.updateStickyHeaderRowStyles();
this.updateStickyColumnStyles();
};
/**
* Clears any existing content in the footer row outlet and creates a new embedded view
* in the outlet using the footer row definition.
*/
MatVsTableComponent.prototype._forceRenderFooterRows = function () {
var _this = this;
// Clear the footer row outlet if any content exists.
if (this._footerRowOutlet.viewContainer.length > 0) {
this._footerRowOutlet.viewContainer.clear();
}
this._footerRowDefs.forEach(function (def, i) { return _this._renderRow(_this._footerRowOutlet, def, i); });
this.updateStickyFooterRowStyles();
this.updateStickyColumnStyles();
};
/** Adds the sticky column styles for the rows according to the columns' stick states. */
MatVsTableComponent.prototype._addStickyColumnStyles = function (rows, rowDef) {
var _this = this;
var columnDefs = Array.from(rowDef.columns || []).map(function (columnName) {
var columnDef = _this._columnDefsByName.get(columnName);
if (!columnDef) {
throw getTableUnknownColumnError(columnName);
}
return columnDef;
});
var stickyStartStates = columnDefs.map(function (columnDef) { return columnDef.sticky; });
var stickyEndStates = columnDefs.map(function (columnDef) { return columnDef.stickyEnd; });
this._stickyStyler.updateStickyColumns(rows, stickyStartStates, stickyEndStates);
};
/** Gets the list of rows that have been rendered in the row outlet. */
MatVsTableComponent.prototype._getRenderedRows = function (rowOutlet) {
var