@angular/cdk
Version:
Angular Material Component Development Kit
1,050 lines (1,016 loc) • 112 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/cdk/platform'), require('@angular/common'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('@angular/cdk/table', ['exports', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/cdk/platform', '@angular/common', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.table = {}), global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.cdk.platform, global.ng.common, global.ng.core, global.rxjs, global.rxjs.operators));
}(this, (function (exports, bidi, coercion, collections, platform, common, core, rxjs, operators) { '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;
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Mixin to provide a directive with a function that checks if the sticky input has been
* changed since the last time the function was called. Essentially adds a dirty-check to the
* sticky value.
* @docs-private
*/
function mixinHasStickyInput(base) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, __spread(args)) || this;
_this._sticky = false;
/** Whether the sticky input has changed since it was last checked. */
_this._hasStickyChanged = false;
return _this;
}
Object.defineProperty(class_1.prototype, "sticky", {
/** Whether sticky positioning should be applied. */
get: function () { return this._sticky; },
set: function (v) {
var prevValue = this._sticky;
this._sticky = coercion.coerceBooleanProperty(v);
this._hasStickyChanged = prevValue !== this._sticky;
},
enumerable: false,
configurable: true
});
/** Whether the sticky value has changed since this was last called. */
class_1.prototype.hasStickyChanged = function () {
var hasStickyChanged = this._hasStickyChanged;
this._hasStickyChanged = false;
return hasStickyChanged;
};
/** Resets the dirty check for cases where the sticky state has been used without checking. */
class_1.prototype.resetStickyChanged = function () {
this._hasStickyChanged = false;
};
return class_1;
}(base));
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Used to provide a table to some of the sub-components without causing a circular dependency.
* @docs-private
*/
var CDK_TABLE = new core.InjectionToken('CDK_TABLE');
/** Injection token that can be used to specify the text column options. */
var TEXT_COLUMN_OPTIONS = new core.InjectionToken('text-column-options');
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Cell definition for a CDK table.
* Captures the template of a column's data row cell as well as cell-specific properties.
*/
var CdkCellDef = /** @class */ (function () {
function CdkCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkCellDef.decorators = [
{ type: core.Directive, args: [{ selector: '[cdkCellDef]' },] }
];
CdkCellDef.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
return CdkCellDef;
}());
/**
* Header cell definition for a CDK table.
* Captures the template of a column's header cell and as well as cell-specific properties.
*/
var CdkHeaderCellDef = /** @class */ (function () {
function CdkHeaderCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkHeaderCellDef.decorators = [
{ type: core.Directive, args: [{ selector: '[cdkHeaderCellDef]' },] }
];
CdkHeaderCellDef.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
return CdkHeaderCellDef;
}());
/**
* Footer cell definition for a CDK table.
* Captures the template of a column's footer cell and as well as cell-specific properties.
*/
var CdkFooterCellDef = /** @class */ (function () {
function CdkFooterCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkFooterCellDef.decorators = [
{ type: core.Directive, args: [{ selector: '[cdkFooterCellDef]' },] }
];
CdkFooterCellDef.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
return CdkFooterCellDef;
}());
// Boilerplate for applying mixins to CdkColumnDef.
/** @docs-private */
var CdkColumnDefBase = /** @class */ (function () {
function CdkColumnDefBase() {
}
return CdkColumnDefBase;
}());
var _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
/**
* Column definition for the CDK table.
* Defines a set of cells available for a table column.
*/
var CdkColumnDef = /** @class */ (function (_super) {
__extends(CdkColumnDef, _super);
function CdkColumnDef(_table) {
var _this = _super.call(this) || this;
_this._table = _table;
_this._stickyEnd = false;
return _this;
}
Object.defineProperty(CdkColumnDef.prototype, "name", {
/** Unique name for this column. */
get: function () {
return this._name;
},
set: function (name) {
// If the directive is set without a name (updated programatically), then this setter will
// trigger with an empty string and should not overwrite the programatically set value.
if (name) {
this._name = name;
this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(CdkColumnDef.prototype, "stickyEnd", {
/**
* Whether this column should be sticky positioned on the end of the row. Should make sure
* that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
* has been changed.
*/
get: function () {
return this._stickyEnd;
},
set: function (v) {
var prevValue = this._stickyEnd;
this._stickyEnd = coercion.coerceBooleanProperty(v);
this._hasStickyChanged = prevValue !== this._stickyEnd;
},
enumerable: false,
configurable: true
});
CdkColumnDef.decorators = [
{ type: core.Directive, args: [{
selector: '[cdkColumnDef]',
inputs: ['sticky'],
providers: [{ provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: CdkColumnDef }],
},] }
];
CdkColumnDef.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core.Inject, args: [CDK_TABLE,] }, { type: core.Optional }] }
]; };
CdkColumnDef.propDecorators = {
name: [{ type: core.Input, args: ['cdkColumnDef',] }],
stickyEnd: [{ type: core.Input, args: ['stickyEnd',] }],
cell: [{ type: core.ContentChild, args: [CdkCellDef,] }],
headerCell: [{ type: core.ContentChild, args: [CdkHeaderCellDef,] }],
footerCell: [{ type: core.ContentChild, args: [CdkFooterCellDef,] }]
};
return CdkColumnDef;
}(_CdkColumnDefBase));
/** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
var BaseCdkCell = /** @class */ (function () {
function BaseCdkCell(columnDef, elementRef) {
var columnClassName = "cdk-column-" + columnDef.cssClassFriendlyName;
elementRef.nativeElement.classList.add(columnClassName);
}
return BaseCdkCell;
}());
/** Header cell template container that adds the right classes and role. */
var CdkHeaderCell = /** @class */ (function (_super) {
__extends(CdkHeaderCell, _super);
function CdkHeaderCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkHeaderCell.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-header-cell, th[cdk-header-cell]',
host: {
'class': 'cdk-header-cell',
'role': 'columnheader',
},
},] }
];
CdkHeaderCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: core.ElementRef }
]; };
return CdkHeaderCell;
}(BaseCdkCell));
/** Footer cell template container that adds the right classes and role. */
var CdkFooterCell = /** @class */ (function (_super) {
__extends(CdkFooterCell, _super);
function CdkFooterCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkFooterCell.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-footer-cell, td[cdk-footer-cell]',
host: {
'class': 'cdk-footer-cell',
'role': 'gridcell',
},
},] }
];
CdkFooterCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: core.ElementRef }
]; };
return CdkFooterCell;
}(BaseCdkCell));
/** Cell template container that adds the right classes and role. */
var CdkCell = /** @class */ (function (_super) {
__extends(CdkCell, _super);
function CdkCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkCell.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-cell, td[cdk-cell]',
host: {
'class': 'cdk-cell',
'role': 'gridcell',
},
},] }
];
CdkCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: core.ElementRef }
]; };
return CdkCell;
}(BaseCdkCell));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* The row template that can be used by the mat-table. Should not be used outside of the
* material library.
*/
var CDK_ROW_TEMPLATE = "<ng-container cdkCellOutlet></ng-container>";
/**
* Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
* for changes and notifying the table.
*/
var BaseRowDef = /** @class */ (function () {
function BaseRowDef(
/** @docs-private */ template, _differs) {
this.template = template;
this._differs = _differs;
}
BaseRowDef.prototype.ngOnChanges = function (changes) {
// Create a new columns differ if one does not yet exist. Initialize it based on initial value
// of the columns property or an empty array if none is provided.
if (!this._columnsDiffer) {
var columns = (changes['columns'] && changes['columns'].currentValue) || [];
this._columnsDiffer = this._differs.find(columns).create();
this._columnsDiffer.diff(columns);
}
};
/**
* Returns the difference between the current columns and the columns from the last diff, or null
* if there is no difference.
*/
BaseRowDef.prototype.getColumnsDiff = function () {
return this._columnsDiffer.diff(this.columns);
};
/** Gets this row def's relevant cell template from the provided column def. */
BaseRowDef.prototype.extractCellTemplate = function (column) {
if (this instanceof CdkHeaderRowDef) {
return column.headerCell.template;
}
if (this instanceof CdkFooterRowDef) {
return column.footerCell.template;
}
else {
return column.cell.template;
}
};
BaseRowDef.decorators = [
{ type: core.Directive }
];
BaseRowDef.ctorParameters = function () { return [
{ type: core.TemplateRef },
{ type: core.IterableDiffers }
]; };
return BaseRowDef;
}());
// Boilerplate for applying mixins to CdkHeaderRowDef.
/** @docs-private */
var CdkHeaderRowDefBase = /** @class */ (function (_super) {
__extends(CdkHeaderRowDefBase, _super);
function CdkHeaderRowDefBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
return CdkHeaderRowDefBase;
}(BaseRowDef));
var _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
/**
* Header row definition for the CDK table.
* Captures the header row's template and other header properties such as the columns to display.
*/
var CdkHeaderRowDef = /** @class */ (function (_super) {
__extends(CdkHeaderRowDef, _super);
function CdkHeaderRowDef(template, _differs, _table) {
var _this = _super.call(this, template, _differs) || this;
_this._table = _table;
return _this;
}
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
CdkHeaderRowDef.prototype.ngOnChanges = function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
};
CdkHeaderRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[cdkHeaderRowDef]',
inputs: ['columns: cdkHeaderRowDef', 'sticky: cdkHeaderRowDefSticky'],
},] }
];
CdkHeaderRowDef.ctorParameters = function () { return [
{ type: core.TemplateRef },
{ type: core.IterableDiffers },
{ type: undefined, decorators: [{ type: core.Inject, args: [CDK_TABLE,] }, { type: core.Optional }] }
]; };
return CdkHeaderRowDef;
}(_CdkHeaderRowDefBase));
// Boilerplate for applying mixins to CdkFooterRowDef.
/** @docs-private */
var CdkFooterRowDefBase = /** @class */ (function (_super) {
__extends(CdkFooterRowDefBase, _super);
function CdkFooterRowDefBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
return CdkFooterRowDefBase;
}(BaseRowDef));
var _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
/**
* Footer row definition for the CDK table.
* Captures the footer row's template and other footer properties such as the columns to display.
*/
var CdkFooterRowDef = /** @class */ (function (_super) {
__extends(CdkFooterRowDef, _super);
function CdkFooterRowDef(template, _differs, _table) {
var _this = _super.call(this, template, _differs) || this;
_this._table = _table;
return _this;
}
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
CdkFooterRowDef.prototype.ngOnChanges = function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
};
CdkFooterRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[cdkFooterRowDef]',
inputs: ['columns: cdkFooterRowDef', 'sticky: cdkFooterRowDefSticky'],
},] }
];
CdkFooterRowDef.ctorParameters = function () { return [
{ type: core.TemplateRef },
{ type: core.IterableDiffers },
{ type: undefined, decorators: [{ type: core.Inject, args: [CDK_TABLE,] }, { type: core.Optional }] }
]; };
return CdkFooterRowDef;
}(_CdkFooterRowDefBase));
/**
* Data row definition for the CDK table.
* Captures the header row's template and other row properties such as the columns to display and
* a when predicate that describes when this row should be used.
*/
var CdkRowDef = /** @class */ (function (_super) {
__extends(CdkRowDef, _super);
// TODO(andrewseguin): Add an input for providing a switch function to determine
// if this template should be used.
function CdkRowDef(template, _differs, _table) {
var _this = _super.call(this, template, _differs) || this;
_this._table = _table;
return _this;
}
CdkRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[cdkRowDef]',
inputs: ['columns: cdkRowDefColumns', 'when: cdkRowDefWhen'],
},] }
];
CdkRowDef.ctorParameters = function () { return [
{ type: core.TemplateRef },
{ type: core.IterableDiffers },
{ type: undefined, decorators: [{ type: core.Inject, args: [CDK_TABLE,] }, { type: core.Optional }] }
]; };
return CdkRowDef;
}(BaseRowDef));
/**
* Outlet for rendering cells inside of a row or header row.
* @docs-private
*/
var CdkCellOutlet = /** @class */ (function () {
function CdkCellOutlet(_viewContainer) {
this._viewContainer = _viewContainer;
CdkCellOutlet.mostRecentCellOutlet = this;
}
CdkCellOutlet.prototype.ngOnDestroy = function () {
// If this was the last outlet being rendered in the view, remove the reference
// from the static property after it has been destroyed to avoid leaking memory.
if (CdkCellOutlet.mostRecentCellOutlet === this) {
CdkCellOutlet.mostRecentCellOutlet = null;
}
};
/**
* Static property containing the latest constructed instance of this class.
* Used by the CDK table when each CdkHeaderRow and CdkRow component is created using
* createEmbeddedView. After one of these components are created, this property will provide
* a handle to provide that component's cells and context. After init, the CdkCellOutlet will
* construct the cells with the provided context.
*/
CdkCellOutlet.mostRecentCellOutlet = null;
CdkCellOutlet.decorators = [
{ type: core.Directive, args: [{ selector: '[cdkCellOutlet]' },] }
];
CdkCellOutlet.ctorParameters = function () { return [
{ type: core.ViewContainerRef }
]; };
return CdkCellOutlet;
}());
/** Header template container that contains the cell outlet. Adds the right class and role. */
var CdkHeaderRow = /** @class */ (function () {
function CdkHeaderRow() {
}
CdkHeaderRow.decorators = [
{ type: core.Component, args: [{
selector: 'cdk-header-row, tr[cdk-header-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-header-row',
'role': 'row',
},
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None
},] }
];
return CdkHeaderRow;
}());
/** Footer template container that contains the cell outlet. Adds the right class and role. */
var CdkFooterRow = /** @class */ (function () {
function CdkFooterRow() {
}
CdkFooterRow.decorators = [
{ type: core.Component, args: [{
selector: 'cdk-footer-row, tr[cdk-footer-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-footer-row',
'role': 'row',
},
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None
},] }
];
return CdkFooterRow;
}());
/** Data row template container that contains the cell outlet. Adds the right class and role. */
var CdkRow = /** @class */ (function () {
function CdkRow() {
}
CdkRow.decorators = [
{ type: core.Component, args: [{
selector: 'cdk-row, tr[cdk-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-row',
'role': 'row',
},
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None
},] }
];
return CdkRow;
}());
/** Row that can be used to display a message when no data is shown in the table. */
var CdkNoDataRow = /** @class */ (function () {
function CdkNoDataRow(templateRef) {
this.templateRef = templateRef;
}
CdkNoDataRow.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[cdkNoDataRow]'
},] }
];
CdkNoDataRow.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
return CdkNoDataRow;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* List of all possible directions that can be used for sticky positioning.
* @docs-private
*/
var STICKY_DIRECTIONS = ['top', 'bottom', 'left', 'right'];
/**
* Applies and removes sticky positioning styles to the `CdkTable` rows and columns cells.
* @docs-private
*/
var StickyStyler = /** @class */ (function () {
/**
* @param _isNativeHtmlTable Whether the sticky logic should be based on a table
* that uses the native `<table>` element.
* @param _stickCellCss The CSS class that will be applied to every row/cell that has
* sticky positioning applied.
* @param direction The directionality context of the table (ltr/rtl); affects column positioning
* by reversing left/right positions.
* @param _isBrowser Whether the table is currently being rendered on the server or the client.
*/
function StickyStyler(_isNativeHtmlTable, _stickCellCss, direction, _isBrowser) {
if (_isBrowser === void 0) { _isBrowser = true; }
this._isNativeHtmlTable = _isNativeHtmlTable;
this._stickCellCss = _stickCellCss;
this.direction = direction;
this._isBrowser = _isBrowser;
}
/**
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
* style, setting the zIndex to 0, and unsetting each provided sticky direction.
* @param rows The list of rows that should be cleared from sticking in the provided directions
* @param stickyDirections The directions that should no longer be set as sticky on the rows.
*/
StickyStyler.prototype.clearStickyPositioning = function (rows, stickyDirections) {
var e_1, _a;
try {
for (var rows_1 = __values(rows), rows_1_1 = rows_1.next(); !rows_1_1.done; rows_1_1 = rows_1.next()) {
var row = rows_1_1.value;
// If the row isn't an element (e.g. if it's an `ng-container`),
// it won't have inline styles or `children` so we skip it.
if (row.nodeType !== row.ELEMENT_NODE) {
continue;
}
this._removeStickyStyle(row, stickyDirections);
for (var i = 0; i < row.children.length; i++) {
var cell = row.children[i];
this._removeStickyStyle(cell, stickyDirections);
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (rows_1_1 && !rows_1_1.done && (_a = rows_1.return)) _a.call(rows_1);
}
finally { if (e_1) throw e_1.error; }
}
};
/**
* Applies sticky left and right positions to the cells of each row according to the sticky
* states of the rendered column definitions.
* @param rows The rows that should have its set of cells stuck according to the sticky states.
* @param stickyStartStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the start of the row.
* @param stickyEndStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the end of the row.
*/
StickyStyler.prototype.updateStickyColumns = function (rows, stickyStartStates, stickyEndStates) {
var e_2, _a;
var hasStickyColumns = stickyStartStates.some(function (state) { return state; }) || stickyEndStates.some(function (state) { return state; });
if (!rows.length || !hasStickyColumns || !this._isBrowser) {
return;
}
var firstRow = rows[0];
var numCells = firstRow.children.length;
var cellWidths = this._getCellWidths(firstRow);
var startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
var endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
var isRtl = this.direction === 'rtl';
try {
for (var rows_2 = __values(rows), rows_2_1 = rows_2.next(); !rows_2_1.done; rows_2_1 = rows_2.next()) {
var row = rows_2_1.value;
for (var i = 0; i < numCells; i++) {
var cell = row.children[i];
if (stickyStartStates[i]) {
this._addStickyStyle(cell, isRtl ? 'right' : 'left', startPositions[i]);
}
if (stickyEndStates[i]) {
this._addStickyStyle(cell, isRtl ? 'left' : 'right', endPositions[i]);
}
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (rows_2_1 && !rows_2_1.done && (_a = rows_2.return)) _a.call(rows_2);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* Applies sticky positioning to the row's cells if using the native table layout, and to the
* row itself otherwise.
* @param rowsToStick The list of rows that should be stuck according to their corresponding
* sticky state and to the provided top or bottom position.
* @param stickyStates A list of boolean states where each state represents whether the row
* should be stuck in the particular top or bottom position.
* @param position The position direction in which the row should be stuck if that row should be
* sticky.
*
*/
StickyStyler.prototype.stickRows = function (rowsToStick, stickyStates, position) {
// Since we can't measure the rows on the server, we can't stick the rows properly.
if (!this._isBrowser) {
return;
}
// If positioning the rows to the bottom, reverse their order when evaluating the sticky
// position such that the last row stuck will be "bottom: 0px" and so on. Note that the
// sticky states need to be reversed as well.
var rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
var states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
var stickyHeight = 0;
for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
if (!states[rowIndex]) {
continue;
}
var row = rows[rowIndex];
if (this._isNativeHtmlTable) {
for (var j = 0; j < row.children.length; j++) {
var cell = row.children[j];
this._addStickyStyle(cell, position, stickyHeight);
}
}
else {
// Flex does not respect the stick positioning on the cells, needs to be applied to the row.
// If this is applied on a native table, Safari causes the header to fly in wrong direction.
this._addStickyStyle(row, position, stickyHeight);
}
if (rowIndex === rows.length - 1) {
// prevent unnecessary reflow from getBoundingClientRect()
return;
}
stickyHeight += row.getBoundingClientRect().height;
}
};
/**
* When using the native table in Safari, sticky footer cells do not stick. The only way to stick
* footer rows is to apply sticky styling to the tfoot container. This should only be done if
* all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
* the tfoot element.
*/
StickyStyler.prototype.updateStickyFooterContainer = function (tableElement, stickyStates) {
if (!this._isNativeHtmlTable) {
return;
}
var tfoot = tableElement.querySelector('tfoot');
if (stickyStates.some(function (state) { return !state; })) {
this._removeStickyStyle(tfoot, ['bottom']);
}
else {
this._addStickyStyle(tfoot, 'bottom', 0);
}
};
/**
* Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
* the zIndex, removing each of the provided sticky directions, and removing the
* sticky position if there are no more directions.
*/
StickyStyler.prototype._removeStickyStyle = function (element, stickyDirections) {
var e_3, _a;
try {
for (var stickyDirections_1 = __values(stickyDirections), stickyDirections_1_1 = stickyDirections_1.next(); !stickyDirections_1_1.done; stickyDirections_1_1 = stickyDirections_1.next()) {
var dir = stickyDirections_1_1.value;
element.style[dir] = '';
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (stickyDirections_1_1 && !stickyDirections_1_1.done && (_a = stickyDirections_1.return)) _a.call(stickyDirections_1);
}
finally { if (e_3) throw e_3.error; }
}
element.style.zIndex = this._getCalculatedZIndex(element);
// If the element no longer has any more sticky directions, remove sticky positioning and
// the sticky CSS class.
var hasDirection = STICKY_DIRECTIONS.some(function (dir) { return !!element.style[dir]; });
if (!hasDirection) {
element.style.position = '';
element.classList.remove(this._stickCellCss);
}
};
/**
* Adds the sticky styling to the element by adding the sticky style class, changing position
* to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
* direction and value.
*/
StickyStyler.prototype._addStickyStyle = function (element, dir, dirValue) {
element.classList.add(this._stickCellCss);
element.style[dir] = dirValue + "px";
element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
element.style.zIndex = this._getCalculatedZIndex(element);
};
/**
* Calculate what the z-index should be for the element, depending on what directions (top,
* bottom, left, right) have been set. It should be true that elements with a top direction
* should have the highest index since these are elements like a table header. If any of those
* elements are also sticky in another direction, then they should appear above other elements
* that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
* (e.g. footer rows) should then be next in the ordering such that they are below the header
* but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
* should minimally increment so that they are above non-sticky elements but below top and bottom
* elements.
*/
StickyStyler.prototype._getCalculatedZIndex = function (element) {
var e_4, _a;
var zIndexIncrements = {
top: 100,
bottom: 10,
left: 1,
right: 1,
};
var zIndex = 0;
try {
// Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
// loses the array generic type in the `for of`. But we *also* have to use `Array` because
// typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
for (var _b = __values(STICKY_DIRECTIONS), _c = _b.next(); !_c.done; _c = _b.next()) {
var dir = _c.value;
if (element.style[dir]) {
zIndex += zIndexIncrements[dir];
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
return zIndex ? "" + zIndex : '';
};
/** Gets the widths for each cell in the provided row. */
StickyStyler.prototype._getCellWidths = function (row) {
var cellWidths = [];
var firstRowCells = row.children;
for (var i = 0; i < firstRowCells.length; i++) {
var cell = firstRowCells[i];
cellWidths.push(cell.getBoundingClientRect().width);
}
return cellWidths;
};
/**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
*/
StickyStyler.prototype._getStickyStartColumnPositions = function (widths, stickyStates) {
var positions = [];
var nextPosition = 0;
for (var i = 0; i < widths.length; i++) {
if (stickyStates[i]) {
positions[i] = nextPosition;
nextPosition += widths[i];
}
}
return positions;
};
/**